Chart.js একটি শক্তিশালী লাইব্রেরি যা সহজেই ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়তা করে। তবে শুধুমাত্র বেসিক কনফিগারেশনের বাইরে, এটি অনেক অ্যাডভান্সড কনফিগারেশন অপশনও প্রদান করে। এই অ্যাডভান্সড কনফিগারেশনগুলো আপনাকে আরও ডিটেইলড এবং কাস্টমাইজড চার্ট তৈরি করতে সাহায্য করবে।
১. স্টাইল কাস্টমাইজেশন (Styling Customization)
Chart.js এ আপনি চার্টের বিভিন্ন অংশের স্টাইল কাস্টমাইজ করতে পারেন, যেমন লাইন, বার, স্লাইস ইত্যাদি। কাস্টম স্টাইলিংয়ের মাধ্যমে চার্টকে আরও আকর্ষণীয় এবং ইউজার-বান্ধব করা যায়।
উদাহরণ: লাইন চার্টের কাস্টম স্টাইলিং
const lineChart = new Chart(ctx, {
type: 'line', // চার্ট টাইপ
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [{
label: 'Sales',
data: [10, 20, 30, 40],
borderColor: 'rgba(75, 192, 192, 1)', // লাইন রঙ
backgroundColor: 'rgba(75, 192, 192, 0.2)', // ব্যাকগ্রাউন্ড রঙ
borderWidth: 4, // বর্ডারের প্রস্থ
pointBackgroundColor: 'rgba(75, 192, 192, 1)', // পয়েন্টের রঙ
pointRadius: 6, // পয়েন্টের আকার
tension: 0.1 // লাইন স্নোথনেস
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
borderColor: লাইন রঙ কাস্টমাইজ করা।backgroundColor: লাইনের ব্যাকগ্রাউন্ডের রঙ কাস্টমাইজ করা।pointBackgroundColor: ডেটা পয়েন্টের রঙ কাস্টমাইজ করা।pointRadius: ডেটা পয়েন্টের আকার কাস্টমাইজ করা।tension: লাইনের স্নোথনেস নিয়ন্ত্রণ করা।
২. প্রতিক্রিয়া ক্ষমতা (Responsiveness)
Chart.js-এ responsive অপশনটি চার্টকে রেসপন্সিভ করে তোলে, অর্থাৎ এটি স্ক্রীনের আকার পরিবর্তনের সাথে সঙ্গতি রেখে নিজেকে অটোমেটিক্যালি অ্যাডজাস্ট করে।
উদাহরণ: রেসপন্সিভ চার্ট
options: {
responsive: true,
maintainAspectRatio: false, // স্কেল প্রিজার্ভ করার জন্য
scales: {
y: {
beginAtZero: true
}
}
}
maintainAspectRatio: এটি সেট করতে পারেন যাতে চার্টের স্কেল এবং আকার পরিবর্তন না হয়।
৩. এনিমেশন কাস্টমাইজেশন (Animation Customization)
Chart.js-এ এনিমেশন কাস্টমাইজ করা যায় যাতে ডেটা লোড হওয়া বা চার্টে পরিবর্তন ঘটলে তা সুন্দরভাবে অ্যানিমেট হয়।
উদাহরণ: এনিমেশন কাস্টমাইজেশন
const pieChart = new Chart(ctx, {
type: 'pie', // পাই চার্ট
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
data: [20, 30, 50],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)']
}]
},
options: {
responsive: true,
animation: {
duration: 2000, // এনিমেশন সময়কাল
easing: 'easeOutBounce' // এনিমেশন ইজিং টাইপ
}
}
});
duration: এনিমেশনের সময়কাল (মিলিসেকেন্ডে) কাস্টমাইজ করা।easing: অ্যানিমেশনের গতি কাস্টমাইজ করা (যেমনeaseIn,easeOut,easeOutBounceইত্যাদি)।
৪. টুলটিপ কাস্টমাইজেশন (Tooltip Customization)
Chart.js-এ টুলটিপগুলি ব্যবহারকারীকে চার্টের বিস্তারিত তথ্য দেখানোর জন্য ব্যবহৃত হয়। আপনি টুলটিপের কন্টেন্ট, স্টাইল, অবস্থান ইত্যাদি কাস্টমাইজ করতে পারেন।
উদাহরণ: টুলটিপ কাস্টমাইজেশন
options: {
plugins: {
tooltip: {
enabled: true, // টুলটিপ সক্রিয় করা
backgroundColor: 'rgba(0, 0, 0, 0.7)', // টুলটিপের ব্যাকগ্রাউন্ড রঙ
titleColor: 'white', // টুলটিপের টাইটেল রঙ
bodyColor: 'white', // টুলটিপের বডি রঙ
displayColors: false, // স্লাইসের রঙ প্রদর্শন বন্ধ করা
callbacks: {
label: function(tooltipItem) {
return tooltipItem.label + ': ' + tooltipItem.raw + ' units'; // কাস্টম টুলটিপ কন্টেন্ট
}
}
}
}
}
backgroundColor: টুলটিপের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা।titleColor: টুলটিপের টাইটেল রঙ কাস্টমাইজ করা।bodyColor: টুলটিপের বডি রঙ কাস্টমাইজ করা।callbacks: টুলটিপে কাস্টম কন্টেন্ট যোগ করা।
৫. লেজেন্ড কাস্টমাইজেশন (Legend Customization)
লেজেন্ড চার্টে প্রদর্শিত হয় এবং ডেটাসেট সম্পর্কে তথ্য প্রদান করে। Chart.js-এ আপনি লেজেন্ডের অবস্থান, স্টাইল ইত্যাদি কাস্টমাইজ করতে পারেন।
উদাহরণ: লেজেন্ড কাস্টমাইজেশন
options: {
plugins: {
legend: {
display: true, // লেজেন্ড প্রদর্শন
position: 'top', // লেজেন্ডের অবস্থান (top, left, bottom, right)
labels: {
font: {
size: 16 // লেজেন্ডের ফন্ট সাইজ
},
color: 'black' // লেজেন্ডের লেখা রঙ
}
}
}
}
position: লেজেন্ডের অবস্থান কাস্টমাইজ করা (উপর, নিচে, বাম বা ডানে)।labels: লেজেন্ডের লেবেল কাস্টমাইজ করা।
৬. স্কেল কাস্টমাইজেশন (Scale Customization)
Chart.js-এ আপনি স্কেল কাস্টমাইজ করতে পারেন, যেমন Y-অক্ষের শূন্য থেকে শুরু হওয়া, বা স্কেলগুলির লেবেল পরিবর্তন করা।
উদাহরণ: স্কেল কাস্টমাইজেশন
options: {
scales: {
y: {
beginAtZero: true, // Y-অক্ষ শূন্য থেকে শুরু হবে
ticks: {
stepSize: 10 // টিক মার্কের স্টেপ সাইজ নির্ধারণ
}
}
}
}
beginAtZero: Y-অক্ষ শূন্য থেকে শুরু হবে কিনা তা নির্ধারণ করা।ticks.stepSize: টিক মার্কের স্টেপ সাইজ কাস্টমাইজ করা।
সারাংশ
Chart.js-এ অ্যাডভান্সড কনফিগারেশন ব্যবহার করে আপনি চার্টের বিভিন্ন অংশ যেমন স্টাইল, অ্যানিমেশন, টুলটিপ, লেজেন্ড, স্কেল ইত্যাদি কাস্টমাইজ করতে পারেন। এটি আপনার চার্টগুলিকে আরও ইনফরমেটিভ এবং দৃষ্টিনন্দন করে তোলে, যা আপনার ব্যবহারকারীদের জন্য একটি সেরা অভিজ্ঞতা প্রদান করে।
Chart.js এ Axes (অক্ষ) কাস্টমাইজ করা ডেটা ভিজ্যুয়ালাইজেশনকে আরও পরিষ্কার এবং কাস্টমাইজড করে তুলতে সহায়ক। আপনি এক্স (X) এবং ওয়াই (Y) অক্ষের labels (লেবেল), ticks (টিকস), এবং grid lines (গ্রিড লাইন্স) কাস্টমাইজ করতে পারেন, যা চার্টের পাঠযোগ্যতা এবং দৃশ্যমানতা বাড়াতে সহায়তা করে।
Chart.js তে কাস্টমাইজেশন খুবই নমনীয় এবং সেগুলির মাধ্যমে আপনি চার্টের ডিজাইন ও পারফরম্যান্সকে নিজের চাহিদা অনুযায়ী পরিবর্তন করতে পারেন।
Axes কাস্টমাইজেশন
Chart.js এ, আপনি scales অপশন ব্যবহার করে এক্স এবং ওয়াই অক্ষের বিভিন্ন অংশ কাস্টমাইজ করতে পারেন। নীচে সাধারণ কাস্টমাইজেশন অপশনগুলো আলোচনা করা হলো:
১. Labels কাস্টমাইজেশন
Labels হলো অক্ষের নাম, যা সাধারণত এক্স-অক্ষ ও ওয়াই-অক্ষের মধ্যে প্রদর্শিত হয়। আপনি এই লেবেলগুলো কাস্টমাইজ করতে পারেন যেমন তাদের অবস্থান, রং, ফন্ট স্টাইল ইত্যাদি।
এক্স অক্ষের লেবেল কাস্টমাইজ:
options: {
scales: {
x: {
ticks: {
color: 'blue', // টিক্সের রং
font: {
size: 14, // ফন্ট সাইজ
family: 'Arial', // ফন্ট ফ্যামিলি
weight: 'bold' // ফন্টের স্টাইল
},
callback: function(value) {
return value.toUpperCase(); // লেবেলকে বড় হাতের অক্ষরে রূপান্তর
}
},
grid: {
display: false // গ্রিড লাইনগুলো না দেখানো
}
},
y: {
ticks: {
color: 'green', // টিক্সের রং
font: {
size: 14,
family: 'Arial',
weight: 'bold'
}
},
grid: {
color: 'rgba(0, 0, 0, 0.1)', // গ্রিড লাইন রং
lineWidth: 1 // গ্রিড লাইন প্রস্থ
}
}
}
}
২. Ticks কাস্টমাইজেশন
Ticks হল এক্স-অক্ষ এবং ওয়াই-অক্ষের মধ্যে ছোট ছোট চিহ্ন যা মূলত ডেটা পয়েন্টের প্রতিনিধিত্ব করে। এই টিক্স কাস্টমাইজ করা অনেকটা লেবেল কাস্টমাইজ করার মতোই, আপনি তাদের রং, আকার এবং প্রদর্শনের পদ্ধতি পরিবর্তন করতে পারেন।
টিক্স কাস্টমাইজ করতে:
options: {
scales: {
x: {
ticks: {
stepSize: 10, // টিক্সের মধ্যে পদক্ষেপের আকার
min: 0, // টিক্সের সর্বনিম্ন মান
max: 100 // টিক্সের সর্বোচ্চ মান
}
},
y: {
ticks: {
stepSize: 5, // টিক্সের মধ্যে পদক্ষেপ
beginAtZero: true // ওয়াই-অক্ষ ০ থেকে শুরু হবে
}
}
}
}
৩. Grid Lines কাস্টমাইজেশন
Grid Lines হল সেই লাইনগুলো যা চার্টের ব্যাকগ্রাউন্ডে থাকে এবং ডেটা পয়েন্টের মধ্যে পার্থক্য বোঝাতে সাহায্য করে। আপনি এই গ্রিড লাইনের রং, প্রস্থ এবং দৃশ্যমানতা কাস্টমাইজ করতে পারেন।
Grid Lines কাস্টমাইজ:
options: {
scales: {
x: {
grid: {
display: true, // গ্রিড লাইন প্রদর্শন
color: 'rgba(0, 0, 0, 0.1)', // গ্রিড লাইন রং
lineWidth: 1 // গ্রিড লাইন প্রস্থ
}
},
y: {
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.1)', // গ্রিড লাইন রং
lineWidth: 1 // গ্রিড লাইন প্রস্থ
}
}
}
}
৪. Grid Lines কাস্টমাইজ করতে আরও উন্নত অপশন
আপনি গ্রিড লাইনের মধ্যে বিভিন্ন ধরনের কাস্টমাইজেশন করতে পারেন:
borderDash: গ্রিড লাইনকে ড্যাশড বা সলিড লাইন হিসেবে পরিবর্তন করতে।drawOnChartArea: গ্রিড লাইনের প্রদর্শন প্রভাব পরিবর্তন করতে।
options: {
scales: {
x: {
grid: {
borderDash: [5, 5], // ড্যাশড লাইন
drawOnChartArea: false // গ্রিড লাইনের উপর চার্ট আঁকা হবে না
}
},
y: {
grid: {
borderDash: [10, 5], // গ্রিড লাইনের ড্যাশ প্যাটার্ন
drawOnChartArea: true
}
}
}
}
৫. Reverse Axis (অক্ষের বিপরীত প্রদর্শন)
আপনি চাইলে অক্ষের reverse বা বিপরীত অর্থাৎ উল্টো দিকেও প্রদর্শন করতে পারেন।
options: {
scales: {
x: {
reverse: true // এক্স-অক্ষকে উল্টো দিক থেকে প্রদর্শন
},
y: {
reverse: true // ওয়াই-অক্ষকে উল্টো দিক থেকে প্রদর্শন
}
}
}
উদাহরণ: কাস্টমাইজড এক্স এবং ওয়াই অক্ষের গ্রিড, টিক্স, এবং লেবেল
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line', // Line chart
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Sales Data',
data: [10, 20, 30, 40, 50],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
fill: false
}]
},
options: {
scales: {
x: {
ticks: {
color: 'purple',
font: {
size: 14,
weight: 'bold'
}
},
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.1)',
lineWidth: 1
}
},
y: {
ticks: {
color: 'green',
font: {
size: 14,
weight: 'bold'
},
beginAtZero: true
},
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.1)',
lineWidth: 1
}
}
}
}
});
সারাংশ
Chart.js এ Axes কাস্টমাইজেশন এর মাধ্যমে আপনি চার্টের এক্স ও ওয়াই অক্ষের labels, ticks, এবং grid lines কাস্টমাইজ করে আপনার চার্টকে আরও আকর্ষণীয় এবং পাঠযোগ্য করতে পারেন। আপনি বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহার করে চার্টের ভিজ্যুয়াল ডিজাইনকে উন্নত করতে পারবেন, যা ডেটা ভিজ্যুয়ালাইজেশনকে আরও কার্যকর করে তোলে।
Chart.js একটি অত্যন্ত কাস্টমাইজেবল লাইব্রেরি যা ব্যবহারকারীদের তাদের চার্টের Legends (লেজেন্ড) এবং Tooltips (টুলটিপস) কাস্টমাইজ করার সুযোগ প্রদান করে। এই বৈশিষ্ট্যগুলোকে কাস্টমাইজ করে আপনি আপনার চার্টের প্রদর্শন এবং ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করতে পারেন।
Legends কাস্টমাইজ করা
Legends চার্টের একটি গুরুত্বপূর্ণ অংশ যা ডেটা সিরিজের নাম এবং তাদের রঙের কোড দেখায়। Chart.js আপনাকে লেজেন্ডের অবস্থান, রঙ, ফন্ট, আকার এবং অন্যান্য সেটিংস কাস্টমাইজ করার সুযোগ দেয়।
Legends কাস্টমাইজেশন এর উপাদান:
display: লেজেন্ড দেখানো হবে কিনা তা নিয়ন্ত্রণ করে।position: লেজেন্ড কোথায় অবস্থান করবে (যেমনtop,left,bottom,right)।labels: লেজেন্ডের লেবেল কাস্টমাইজ করতে ব্যবহৃত হয় (যেমন ফন্ট, আকার, রঙ)।onClick: লেজেন্ডের উপরে ক্লিক করার ইভেন্ট হ্যান্ডলার।
Legends কাস্টমাইজ করার উদাহরণ:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: true, // লেজেন্ড দেখানো হবে
position: 'top', // লেজেন্ডের অবস্থান
labels: {
color: 'rgb(0, 0, 0)', // লেজেন্ডের রঙ
font: {
size: 14, // ফন্ট সাইজ
family: 'Arial', // ফন্ট ফ্যামিলি
weight: 'bold' // ফন্ট ওয়েট
}
},
onClick: function(e) {
alert('Legend clicked!');
}
}
}
}
});
Legends কাস্টমাইজেশনের মূল পয়েন্ট:
position: আপনি লেজেন্ডের অবস্থানtop,left,bottom, অথবাrightনির্ধারণ করতে পারেন।labels: লেজেন্ডের টেক্সটের ফন্ট, সাইজ, রঙ এবং অন্যান্য সেটিংস কাস্টমাইজ করা যায়।onClick: লেজেন্ডের উপরে ক্লিক করলে ইভেন্ট চালানোর জন্যonClickইভেন্ট হ্যান্ডলার ব্যবহার করতে পারেন।
Tooltips কাস্টমাইজ করা
Tooltips চার্টে ডেটা পয়েন্টের উপর হোভার করার সময় প্রদর্শিত হয়। এটি ব্যবহারকারীদের চার্টের ডেটা সম্পর্কে আরও বিস্তারিত তথ্য দেখানোর সুযোগ দেয়। Chart.js আপনাকে টুলটিপের কন্টেন্ট, অবস্থান, ফন্ট, রঙ এবং অন্যান্য সেটিংস কাস্টমাইজ করার সুযোগ দেয়।
Tooltips কাস্টমাইজেশন এর উপাদান:
enabled: টুলটিপ দেখানো হবে কিনা তা নিয়ন্ত্রণ করে।mode: টুলটিপের মোড নির্ধারণ করে (যেমনnearest,index,datasetইত্যাদি)।callbacks: টুলটিপ কাস্টম কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়।backgroundColor: টুলটিপের ব্যাকগ্রাউন্ড রঙ।titleFontSize: টুলটিপের শিরোনামের ফন্ট সাইজ।bodyFontSize: টুলটিপের বডি টেক্সটের ফন্ট সাইজ।
Tooltips কাস্টমাইজ করার উদাহরণ:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Sales',
data: [10, 20, 30, 40, 50],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
enabled: true, // টুলটিপ সক্রিয় করা
mode: 'index', // টুলটিপ মোড নির্ধারণ
backgroundColor: 'rgba(0, 0, 0, 0.7)', // টুলটিপের ব্যাকগ্রাউন্ড রঙ
titleFontSize: 16, // টুলটিপের শিরোনামের ফন্ট সাইজ
bodyFontSize: 14, // টুলটিপের বডির ফন্ট সাইজ
callbacks: {
// কাস্টম টুলটিপ কন্টেন্ট
label: function(tooltipItem) {
return 'Sales: ' + tooltipItem.raw + ' units';
}
}
}
}
}
});
Tooltips কাস্টমাইজেশনের মূল পয়েন্ট:
enabled: টুলটিপের প্রদর্শন সক্ষম বা নিষ্ক্রিয় করা।mode: টুলটিপের প্রদর্শনের ধরন, যেমনnearest,index, অথবাdataset।backgroundColor: টুলটিপের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা।callbacks: আপনি যদি কাস্টম টুলটিপ কন্টেন্ট চাইতে চান, তবেlabelফাংশনের মাধ্যমে সেটি করতে পারেন।
Summary
Chart.js এর Legends এবং Tooltips কাস্টমাইজেশন ডেটার উপস্থাপন এবং ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করতে সহায়ক। লেজেন্ডের মাধ্যমে আপনি চার্টের ডেটাসেট সম্পর্কিত তথ্য প্রদান করতে পারেন এবং টুলটিপের মাধ্যমে ডেটার আরও বিস্তারিত তথ্য দেখাতে পারেন। উভয়ই অত্যন্ত কাস্টমাইজেবল এবং আপনার চার্টের জন্য কার্যকরী কন্টেন্ট সরবরাহ করতে সাহায্য করে।
Chart.js একটি অত্যন্ত শক্তিশালী লাইব্রেরি যা সহজেই রেসপন্সিভ (Responsive) চার্ট তৈরি করতে সহায়ক। রেসপন্সিভ চার্ট এমন একটি চার্ট যা ব্যবহারকারীর ডিভাইসের স্ক্রীনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে আকার এবং বিন্যাস পরিবর্তন করে। এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপ সকল ধরনের স্ক্রীনে ভালোভাবে কাজ করে।
Chart.js এর মাধ্যমে responsive চার্ট তৈরি করতে বেশ কয়েকটি পদ্ধতি ব্যবহার করা যেতে পারে, তবে এটি সাধারণত responsive: true অপশন ব্যবহার করে কনফিগার করা হয়।
Responsive চার্ট তৈরি করার জন্য ধাপসমূহ
ধাপ ১: HTML ফাইল তৈরি
প্রথমে একটি সাধারণ HTML ফাইল তৈরি করতে হবে, যেখানে আপনার চার্ট রেন্ডার হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Chart.js Example</title>
</head>
<body>
<h1>Responsive Chart Example</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
এখানে, আমরা <canvas> এলিমেন্ট ব্যবহার করেছি যেখানে চার্টটি রেন্ডার হবে।
ধাপ ২: JavaScript দিয়ে Responsive চার্ট তৈরি
Chart.js ব্যবহার করে চার্ট কনফিগার করতে হলে, আপনাকে responsive: true সেট করতে হবে। এটি নিশ্চিত করে যে চার্টটি বিভিন্ন ডিভাইসে উপযুক্ত আকারে প্রদর্শিত হবে।
কোড উদাহরণ:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // Chart type: Bar
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Monthly Sales',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true, // Make the chart responsive
maintainAspectRatio: false, // Allow the chart to resize without maintaining aspect ratio
scales: {
y: {
beginAtZero: true
}
}
}
});
প্রধান কনফিগারেশন
responsive: true: এটি নিশ্চিত করে যে চার্টটি স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুযায়ী রিসাইজ হবে।maintainAspectRatio: false: যখন আপনিresponsive: trueব্যবহার করেন, চার্টটি স্ক্রীনের আকার অনুযায়ী অটো রিসাইজ হয়, তবে যদি আপনিmaintainAspectRatio: falseসেট করেন, তাহলে এটি স্ক্রীনের আকার অনুযায়ী চার্টের আকার পরিবর্তন করতে দেবে, এবং আপনার কাস্টম রেশিও অনুসরণ করবে না।
ধাপ ৩: CSS কাস্টমাইজেশন
Canvas এর আকার কাস্টমাইজ করার জন্য কিছু CSS কোডও ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি আপনার <canvas> এলিমেন্টকে পুরো স্ক্রীন বা নির্দিষ্ট আকারে সেট করতে পারেন।
কোড উদাহরণ:
canvas {
max-width: 100%; /* Make canvas width responsive */
height: auto; /* Maintain the aspect ratio */
display: block;
margin: 0 auto; /* Center align canvas */
}
আরও কাস্টমাইজেশন
- মোবাইল ফ্রেন্ডলি:
resize: Chart.js স্বয়ংক্রিয়ভাবে রিসাইজিং প্রক্রিয়া পরিচালনা করে, তবে আপনি যদি চান যে চার্টটির আকার পরিবর্তন হোক স্ক্রীনের আকার অনুযায়ী, তবে আপনাকে অতিরিক্ত কোনো কোডের প্রয়োজন হবে না।
- ডিভাইস ডিটারমিনেশন:
- আপনি বিভিন্ন ডিভাইসের জন্য পৃথক কনফিগারেশনও করতে পারেন, তবে সাধারনত
responsive: trueকোডটি একাধিক স্ক্রীন সাইজে রেন্ডার করতে সক্ষম।
- আপনি বিভিন্ন ডিভাইসের জন্য পৃথক কনফিগারেশনও করতে পারেন, তবে সাধারনত
সারাংশ
Chart.js এর মাধ্যমে একটি responsive চার্ট তৈরি করা খুবই সহজ। কেবলমাত্র responsive: true অপশন ব্যবহার করলে আপনি নিশ্চিত হতে পারেন যে আপনার চার্টটি যে কোনো ডিভাইসে স্বয়ংক্রিয়ভাবে মানিয়ে যাবে। এছাড়াও, maintainAspectRatio: false ব্যবহার করলে চার্টটি স্ক্রীনের আকার অনুযায়ী আরও নমনীয় হবে। এটি আপনার চার্টকে ডেস্কটপ, ট্যাবলেট এবং মোবাইল ডিভাইসে সঠিকভাবে প্রদর্শিত হতে সাহায্য করবে।
Chart.js দিয়ে চার্ট তৈরি করার সময় আপনি কাস্টম ফন্ট এবং কাস্টম রঙ ব্যবহার করে চার্টের দেখনো স্টাইলকে আরও ব্যক্তিগতকৃত (customized) করতে পারেন। Chart.js বিভিন্ন কনফিগারেশন অপশন প্রদান করে, যার মাধ্যমে আপনি ফন্ট, রঙ, এবং অন্যান্য গ্রাফিকাল উপাদান পরিবর্তন করতে পারবেন।
এখানে আমরা দেখব কিভাবে Chart.js এর মাধ্যমে custom fonts এবং custom colors যোগ করা যায়।
১. Custom Fonts যুক্ত করা
Chart.js এর মাধ্যমে আপনি নিজের পছন্দের ফন্ট ব্যবহার করতে পারেন, যা চার্টের টেক্সট (লেবেল, টাইটেল, লেজেন্ড ইত্যাদি) স্টাইলকে কাস্টমাইজ করতে সহায়ক।
Custom Font ব্যবহার করার জন্য প্রয়োজনীয় ধাপগুলো:
ধাপ ১: Font যোগ করা
প্রথমে আপনি যে ফন্টটি ব্যবহার করতে চান, সেটি HTML ফাইলের <head> সেকশনে লিংক করতে হবে। যেমন, যদি আপনি Google Fonts থেকে একটি ফন্ট যোগ করতে চান:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
</head>
এখানে, আমরা Roboto ফন্ট যোগ করেছি।
ধাপ ২: Chart.js কনফিগারেশন এ Custom Font ব্যবহার করা
Chart.js এর options সেকশনে আপনি ফন্ট সেট করতে পারেন। উদাহরণস্বরূপ:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // Chart type
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
labels: {
font: {
family: 'Roboto', // Custom font for legend
size: 14, // Font size
weight: 'bold' // Font weight
}
}
},
tooltip: {
titleFont: {
family: 'Roboto', // Custom font for tooltip title
size: 16,
},
bodyFont: {
family: 'Roboto',
size: 14
}
}
},
scales: {
y: {
ticks: {
font: {
family: 'Roboto', // Custom font for Y-axis ticks
size: 14
}
}
},
x: {
ticks: {
font: {
family: 'Roboto', // Custom font for X-axis ticks
size: 14
}
}
}
}
}
});
এখানে, আমরা Roboto ফন্ট ব্যবহার করেছি এবং এটি টাইটেল, লেজেন্ড, টুলটিপ, এবং এক্স ও ওয়াই-অক্ষের টিক্সের জন্য কাস্টমাইজ করেছি।
২. Custom Colors যুক্ত করা
Chart.js এর মাধ্যমে আপনি চার্টের বিভিন্ন উপাদান যেমন বার, লাইন, পয়েন্ট, টাইটেল, লেজেন্ড এবং টিক্সের জন্য কাস্টম রঙ (Custom Colors) সেট করতে পারেন।
১. বার চার্টের রঙ কাস্টমাইজ করা
প্রতিটি বার (bar) এর রঙ কাস্টমাইজ করতে:
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)', // Red
'rgba(54, 162, 235, 0.2)', // Blue
'rgba(255, 206, 86, 0.2)', // Yellow
'rgba(75, 192, 192, 0.2)', // Green
'rgba(153, 102, 255, 0.2)' // Purple
],
borderColor: [
'rgba(255, 99, 132, 1)', // Red
'rgba(54, 162, 235, 1)', // Blue
'rgba(255, 206, 86, 1)', // Yellow
'rgba(75, 192, 192, 1)', // Green
'rgba(153, 102, 255, 1)' // Purple
],
borderWidth: 1
}]
}
২. টাইটেল এবং লেজেন্ডের জন্য কাস্টম রঙ
Chart.js-এ টাইটেল, লেজেন্ড এবং টুলটিপের রঙ কাস্টমাইজ করতে পারেন:
options: {
responsive: true,
plugins: {
legend: {
labels: {
color: 'rgba(255, 99, 132, 1)' // Custom color for legend
}
},
tooltip: {
backgroundColor: 'rgba(75, 192, 192, 1)', // Custom background color for tooltip
titleColor: 'white', // Custom title color for tooltip
bodyColor: 'black' // Custom body color for tooltip
},
title: {
display: true,
text: 'Monthly Sales Data',
color: 'rgba(75, 192, 192, 1)', // Custom color for title
font: {
family: 'Roboto',
size: 18,
weight: 'bold'
}
}
},
scales: {
y: {
ticks: {
color: 'rgba(255, 99, 132, 1)' // Custom color for Y-axis ticks
}
},
x: {
ticks: {
color: 'rgba(255, 99, 132, 1)' // Custom color for X-axis ticks
}
}
}
}
এখানে, আমরা লেজেন্ড, টুলটিপ, টাইটেল, এবং অক্ষের টিক্স এর জন্য কাস্টম রঙ সেট করেছি।
৩. রঙের প্যালেট ব্যবহার
Chart.js এর মাধ্যমে আপনি রঙের প্যালেট ব্যবহার করতে পারেন, যা একাধিক রঙের সাথে প্রতিটি উপাদান বা সেগমেন্ট সাজানোর জন্য উপযোগী। যেমন, যদি আপনি একটি ডোনাট চার্ট তৈরি করেন, তবে প্রতিটি অংশের জন্য ভিন্ন রঙ ব্যবহার করা যেতে পারে।
backgroundColor: [
'rgba(255, 99, 132, 0.2)', // Red
'rgba(54, 162, 235, 0.2)', // Blue
'rgba(255, 206, 86, 0.2)', // Yellow
'rgba(75, 192, 192, 0.2)', // Green
'rgba(153, 102, 255, 0.2)' // Purple
]
এটি যেকোনো চার্টে ব্যবহৃত হতে পারে, যেমন বার চার্ট, পাই চার্ট, ডোনাট চার্ট, রাডার চার্ট ইত্যাদি।
সারাংশ
Chart.js-এ custom fonts এবং custom colors যোগ করা আপনার চার্টের ডিজাইনকে সম্পূর্ণভাবে কাস্টমাইজ করতে সহায়তা করে। আপনি Google Fonts থেকে পছন্দের ফন্ট ব্যবহার করতে পারেন এবং CSS বা RGBA রঙ ব্যবহার করে চার্টের বিভিন্ন উপাদান যেমন লেবেল, বর্ডার, এবং টুলটিপে রঙ পরিবর্তন করতে পারেন। এটি আপনার চার্টকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।
Chart.js একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজযোগ্য লাইব্রেরি, যা ডেটা ভিজ্যুয়ালাইজেশনকে আরও কার্যকর এবং আকর্ষণীয় করে তোলে। Dataset ফিল্টার এবং পজিশনিং কাস্টমাইজেশন হল Chart.js এর সেইসব বৈশিষ্ট্য যা ডেটার প্রদর্শন এবং লেআউট কাস্টমাইজ করতে সাহায্য করে। এই গাইডে, আমরা দেখব কিভাবে একটি dataset ফিল্টার তৈরি করা যায় এবং কিভাবে চার্টের পজিশনিং কাস্টমাইজ করা যায়।
১. Dataset ফিল্টার
Dataset ফিল্টার ব্যবহার করে আপনি শুধুমাত্র কিছু নির্দিষ্ট ডেটা পয়েন্ট বা ডেটাসেট প্রদর্শন করতে পারেন। এটা খুবই উপকারী যখন আপনি একাধিক ডেটাসেট থেকে কেবল কিছু নির্দিষ্ট ডেটা প্রদর্শন করতে চান।
উদাহরণ: Dataset ফিল্টার করা
ধরা যাক, আপনার একটি চার্ট রয়েছে যেটিতে একাধিক ডেটাসেট আছে এবং আপনি কোন একটি নির্দিষ্ট ডেটাসেট বা কিছু পয়েন্ট প্রদর্শন করতে চান।
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dataset Filter</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Chart.js Dataset Filter Example</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
const ctx = document.getElementById('myChart').getContext('2d');
// Chart.js Data Setup
const myChart = new Chart(ctx, {
type: 'line', // Line chart type
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Dataset 1',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}, {
label: 'Dataset 2',
data: [10, 18, 5, 9, 6, 7],
borderColor: 'rgba(153, 102, 255, 1)',
fill: false
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top', // Positioning the legend at the top
}
},
// Dataset filter logic: Filtering to show only Dataset 1
onClick: function(e) {
const activePoints = myChart.getElementsAtEventForMode(e, 'nearest', {intersect: true}, false);
if (activePoints.length > 0) {
const datasetIndex = activePoints[0].datasetIndex;
if (datasetIndex === 1) {
// Only display Dataset 1 if Dataset 2 is clicked
myChart.data.datasets = [myChart.data.datasets[0]];
} else {
// Restore both datasets if Dataset 1 is clicked
myChart.data.datasets = [{
label: 'Dataset 1',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}, {
label: 'Dataset 2',
data: [10, 18, 5, 9, 6, 7],
borderColor: 'rgba(153, 102, 255, 1)',
fill: false
}];
}
myChart.update();
}
}
}
});
বর্ণনা:
onClick: এখানে আমরা একটিonClickইভেন্ট ব্যবহার করেছি, যাতে ক্লিক করা হলে একটি ডেটাসেট ফিল্টার হয়। উদাহরণস্বরূপ, যদি ব্যবহারকারী 'Dataset 2' ক্লিক করেন, তবে চার্ট শুধুমাত্র 'Dataset 1' প্রদর্শন করবে।getElementsAtEventForMode: এটি Chart.js এর একটি ফাংশন, যা ব্যবহারকারীর ক্লিকের সময় কোন ডেটাসেট বা পয়েন্ট নির্বাচন হয়েছে তা শনাক্ত করে।
২. পজিশনিং কাস্টমাইজেশন
Chart.js এ আপনি অনেক উপায়ে পজিশনিং কাস্টমাইজ করতে পারেন। এর মধ্যে রয়েছে লেজেন্ড, টুলটিপ, স্কেল এবং আরও অনেক কিছু। Chart.js এর options অংশে আপনি এই সব কাস্টমাইজেশন করতে পারেন।
উদাহরণ: পজিশনিং কাস্টমাইজেশন
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning Customization</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Chart.js Positioning Customization</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // Bar chart type
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'right', // Position the legend to the right
labels: {
color: 'black', // Change label color to black
font: {
size: 14
}
}
},
tooltip: {
enabled: true, // Enable tooltips
position: 'nearest', // Position tooltips nearest to the point
callbacks: {
label: function(tooltipItem) {
return 'Votes: ' + tooltipItem.raw;
}
}
}
},
scales: {
y: {
beginAtZero: true,
position: 'left', // Position Y-axis to the left
},
x: {
position: 'bottom' // Position X-axis to the bottom
}
}
}
});
বর্ণনা:
- Legend Position: লেজেন্ডকে
rightএ পজিশন করা হয়েছে, যা চার্টের ডান দিকে অবস্থান করবে। - Tooltip Position: টুলটিপের অবস্থান
nearestকরা হয়েছে, অর্থাৎ টুলটিপটি পয়েন্টের কাছাকাছি প্রদর্শিত হবে। - Axis Position: এক্স-অক্ষ (X-axis) এবং ওয়াই-অক্ষ (Y-axis) পজিশন কাস্টমাইজ করা হয়েছে। এক্স-অক্ষটি নিচে এবং ওয়াই-অক্ষটি বামে অবস্থান করবে।
সারাংশ
Chart.js এ Dataset ফিল্টার এবং পজিশনিং কাস্টমাইজেশন আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও উপযোগী এবং দৃশ্যমান করে তোলে।
- Dataset ফিল্টার দিয়ে আপনি ডেটাসেটের ভিউ কাস্টমাইজ করতে পারেন, যেমন কিছু নির্দিষ্ট ডেটাসেট বা ডেটা পয়েন্ট প্রদর্শন করা।
- পজিশনিং কাস্টমাইজেশন দিয়ে আপনি চার্টের বিভিন্ন উপাদান যেমন লেজেন্ড, টুলটিপ, স্কেল ইত্যাদির অবস্থান এবং স্টাইল কাস্টমাইজ করতে পারেন।
এগুলি ব্যবহারে আপনি আপনার চার্টের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা বাড়াতে পারবেন।
Read more
