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 রঙ ব্যবহার করে চার্টের বিভিন্ন উপাদান যেমন লেবেল, বর্ডার, এবং টুলটিপে রঙ পরিবর্তন করতে পারেন। এটি আপনার চার্টকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
