Chart.js একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন করতে ব্যবহৃত হয়, এবং এটি আপনাকে কাস্টম চার্ট তৈরি এবং কমিউনিটি প্লাগইনস ব্যবহার করার সুবিধা প্রদান করে। কাস্টম চার্ট তৈরি করার মাধ্যমে আপনি আপনার নির্দিষ্ট প্রয়োজন অনুযায়ী চার্টের ডিজাইন এবং কার্যকারিতা পরিবর্তন করতে পারেন, এবং কমিউনিটি প্লাগইনস ব্যবহার করে আপনি চার্টের ফিচারগুলো আরো সমৃদ্ধ করতে পারেন।
এই গাইডে আমরা দেখবো Chart.js এ কাস্টম চার্ট তৈরি এবং কিছু কমিউনিটি প্লাগইনস ব্যবহার করার পদ্ধতি।
কাস্টম Chart তৈরি
Chart.js আপনাকে কাস্টম চার্ট তৈরির জন্য অনেক অপশন দেয়। আপনি নিজের chart types, data points, এবং axes কাস্টমাইজ করতে পারেন। আপনি custom chart types তৈরি করতে Chart.js এর বেসিক সেটআপ ব্যবহার করতে পারেন।
উদাহরণ: কাস্টম বার চার্ট তৈরি করা
ধরি, আমরা একটি কাস্টম বার চার্ট তৈরি করতে চাই যেখানে বারের আকার এবং রঙ নির্ভর করবে ডেটার মানের ওপর। এখানে, chart.js কাস্টমাইজেশন ব্যবহার করা হবে।
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // বার চার্ট
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Custom Sales',
data: [15, 30, 45, 60, 75],
backgroundColor: (context) => {
const value = context.raw;
return value > 50 ? 'rgba(255, 99, 132, 0.2)' : 'rgba(54, 162, 235, 0.2)';
},
borderColor: (context) => {
const value = context.raw;
return value > 50 ? 'rgba(255, 99, 132, 1)' : 'rgba(54, 162, 235, 1)';
},
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
ব্যাখ্যা:
backgroundColorএবংborderColorকাস্টম ফাংশন ব্যবহার করে নির্দিষ্ট ডেটার মানের ওপর নির্ভর করে কাস্টম রঙ এবং বর্ডার অ্যাসাইন করা হয়েছে।context.rawব্যবহার করে ডেটার মান অ্যাক্সেস করা হচ্ছে।
কমিউনিটি প্লাগইনস ব্যবহার
Chart.js একটি অত্যন্ত প্লাগইন সাপোর্টেড লাইব্রেরি। এর মাধ্যমে আপনি আপনার চার্টে নতুন ফিচার যোগ করতে পারেন, যেমন কাস্টম টুলটিপ, গ্রিড লাইন কাস্টমাইজেশন, ডেটা পয়েন্ট শেপস ইত্যাদি। কমিউনিটি প্লাগইনস ব্যবহার করে আপনি চার্টে বিভিন্ন কাস্টম বৈশিষ্ট্য যোগ করতে পারেন।
উদাহরণ: কমিউনিটি প্লাগইনস – Chart.js Data Labels
Data Labels প্লাগইনটি Chart.js এর জন্য একটি জনপ্রিয় প্লাগইন, যা ডেটা পয়েন্টগুলির ওপর লেবেল প্রদর্শন করতে সাহায্য করে। এটি ডেটা পয়েন্টগুলির মান দেখানোর জন্য ব্যবহার করা হয়।
Step 1: প্লাগইন ইনস্টল করা
npm install chartjs-plugin-datalabels
Step 2: Chart.js প্লাগইন ব্যবহার করা
import Chart from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.register(ChartDataLabels);
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // চার্ট টাইপ
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
datalabels: {
color: '#fff',
font: {
size: 16
},
formatter: (value) => `${value}%`, // ডেটা লেবেলে মান প্রদর্শন
}
}
}
});
ব্যাখ্যা:
chartjs-plugin-datalabelsপ্লাগইনটি ডেটা পয়েন্টের উপর লেবেল প্রদর্শন করার জন্য ব্যবহৃত হয়।formatterফাংশন দিয়ে কাস্টম লেবেল ফরম্যাটিং করা হয়েছে, যেখানেvalueযুক্ত করার মাধ্যমে মানের পর একটি শতাংশ চিহ্ন প্রদর্শিত হচ্ছে।
৩. অন্যান্য কমিউনিটি প্লাগইনস
এছাড়া কিছু জনপ্রিয় Chart.js প্লাগইনস রয়েছে, যা আপনি আপনার চার্টে ব্যবহার করতে পারেন:
- chartjs-plugin-zoom: চার্টের মাধ্যমে প্যানিং এবং জুমিং সক্ষম করে।
- chartjs-plugin-annotation: চার্টে অ্যানোটেশন বা লাইন, রেকটেঙ্গেল, এবং পয়েন্ট যোগ করতে সাহায্য করে।
- chartjs-plugin-legend: কাস্টম লেজেন্ড তৈরি করার জন্য ব্যবহৃত হয়।
সারাংশ
Chart.js-এর মাধ্যমে আপনি Custom Charts তৈরি করতে পারেন, যেমন কাস্টম ডেটা পয়েন্ট শেপ, রঙ এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করা। এছাড়া, কমিউনিটি প্লাগইনস ব্যবহার করে আপনি চার্টের কার্যকারিতা আরও বাড়াতে পারেন, যেমন ডেটা লেবেলস, জুমিং, অ্যানোটেশন ইত্যাদি। এই প্লাগইনস Chart.js এর ফিচারগুলো বাড়িয়ে, আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং ইন্টার্যাক্টিভ করে তোলে।
