Chart.js এ Data Labels Plugin ব্যবহার করা একটি শক্তিশালী উপায়, যা আপনাকে চার্টে ডেটা পয়েন্টের উপর সঠিক মান বা লেবেল প্রদর্শন করতে সাহায্য করে। এই প্লাগইনটি চার্টের ভিজ্যুয়ালাইজেশন উন্নত করতে, আরও স্পষ্টভাবে ডেটা প্রদর্শন করতে এবং ব্যবহারকারীর অভিজ্ঞতা বাড়াতে ব্যবহৃত হয়।
Data Labels Plugin মূলত ডেটা পয়েন্টগুলোর উপর লেবেল দেখানোর জন্য ব্যবহৃত হয়, যা বিশেষভাবে গুরুত্বপূর্ণ যখন আপনি চাচ্ছেন যে, আপনার চার্টে প্রতিটি ডেটা পয়েন্টের মান ব্যবহারকারীরা সরাসরি দেখতে পারেন।
১. Data Labels Plugin ইনস্টল করা
প্রথমে আপনাকে Chart.js Data Labels Plugin ইনস্টল করতে হবে। এটি NPM বা CDN-এর মাধ্যমে করা যেতে পারে।
NPM এর মাধ্যমে ইনস্টল:
npm install chartjs-plugin-datalabels
CDN এর মাধ্যমে ইনস্টল:
Chart.js এবং Data Labels Plugin-এর CDN লিঙ্ক যোগ করুন:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
২. Data Labels Plugin কনফিগারেশন
এবার, Chart.js এর কনফিগারেশনে Data Labels Plugin ব্যবহার করা হবে। নিচে একটি উদাহরণ দেওয়া হলো যেখানে bar chart এ ডেটা লেবেল প্রদর্শন করা হয়েছে।
উদাহরণ: Data Labels Plugin ব্যবহার করে একটি বার চার্ট তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Data Labels Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // Chart type
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // X-axis labels
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5, 2], // Data points for Y-axis
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: {
datalabels: {
display: true, // Display data labels
color: 'black', // Text color for data labels
font: {
size: 14, // Font size for the labels
weight: 'bold' // Font weight
},
align: 'center', // Label alignment (top, bottom, center)
formatter: function(value) {
return value + ' Votes'; // Custom formatting for labels
}
}
}
}
});
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- Plugin সক্রিয় করা:
plugins: { datalabels: { ... } }অংশের মাধ্যমে Data Labels Plugin সক্রিয় করা হয়। display: true: এটি Data Labels কে চার্টে প্রদর্শন করতে সক্ষম করে।color: লেবেলের টেক্সটের রঙ সেট করে।font: লেবেলের ফন্ট সাইজ এবং ফন্ট ওয়েট কাস্টমাইজ করা হয়।align: লেবেলের অবস্থান (যেমনtop,bottom,center) নির্ধারণ করা হয়।formatter: লেবেলের কাস্টম ফরম্যাট নির্ধারণ করা হয়, যেখানে আপনি ডেটার সাথে স্ট্যাটিক টেক্সট যুক্ত করতে পারেন (যেমন' Votes')।
৩. Data Labels Plugin এর কাস্টমাইজেশন
Chart.js Data Labels Plugin এর সাহায্যে আপনি ডেটা লেবেলগুলোর বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করতে পারেন:
- Positioning (অবস্থান): আপনি Data Labels-এর অবস্থান (যেমন টপ, বটম, সেন্টার) কাস্টমাইজ করতে পারেন।
- Font Size, Font Color, Font Weight: টেক্সটের ফন্ট সাইজ, ফন্ট কালার এবং ফন্ট ওয়েট পরিবর্তন করতে পারেন।
- Visibility Control (দেখানো বা লুকানো):
displayপ্যারামিটার দিয়ে Data Labels দেখানো বা লুকানো যায়। - Conditional Formatting:
formatterফাংশন দিয়ে আপনি ডেটা লেবেলগুলির কন্টেন্ট কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি যদি শুধুমাত্র নির্দিষ্ট মানের ডেটা পয়েন্টের জন্য লেবেল দেখাতে চান, তবে এটি নিয়ন্ত্রণ করা যেতে পারে।
উদাহরণ:
options: {
plugins: {
datalabels: {
color: function(context) {
// Display red for values greater than 10, otherwise blue
return context.dataset.data[context.dataIndex] > 10 ? 'red' : 'blue';
},
font: {
size: 12,
weight: 'bold'
},
align: 'top', // Position the label at the top of the bar
formatter: function(value) {
return value + ' units'; // Append 'units' to each label
}
}
}
}
Data Labels Plugin এর অন্যান্য বৈশিষ্ট্য
clamp: এটি ডেটা লেবেলগুলোকে গ্রাফের সীমার মধ্যে আটকে রাখে, যাতে তারা অতিরিক্ত বড় না হয়ে যায়।padding: লেবেলের চারপাশে প্যাডিং নির্ধারণ করে যাতে লেবেলগুলি আরও স্পষ্টভাবে দেখতে পাওয়া যায়।
datalabels: {
clamp: true, // Prevent labels from going outside the chart
padding: 10, // Padding around the labels
}
সারাংশ
Chart.js এর Data Labels Plugin ব্যবহার করে আপনি আপনার চার্টে ডেটা পয়েন্টগুলোর উপর লেবেল প্রদর্শন করতে পারেন। এটি আপনার চার্টকে আরও তথ্যপূর্ণ এবং ব্যবহারকারীদের জন্য আরও সহজবোধ্য করে তোলে। আপনি লেবেলগুলির অবস্থান, আকার, রঙ, এবং কন্টেন্ট কাস্টমাইজ করতে পারেন এবং টুলটিপের সাথে আরও তথ্য প্রদান করতে পারেন।
Read more
