Chart.js একটি অত্যন্ত শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন এবং চার্ট তৈরি করতে সহায়তা করে। Chart.js ডিফল্টভাবে টুলটিপস প্রদান করে যা ব্যবহারকারীদের জন্য চার্টের ডেটা পয়েন্ট সম্পর্কে বিস্তারিত তথ্য দেখায়। তবে, কখনও কখনও আপনি ডিফল্ট টুলটিপের পরিবর্তে কাস্টম টুলটিপ তৈরি করতে চাইবেন, যাতে এটি আপনার ডিজাইন বা ইউজার ইন্টারফেসের সাথে সামঞ্জস্যপূর্ণ হয়।
এই গাইডে আমরা দেখব কীভাবে Custom Tooltip তৈরি করা যায় এবং সেটি Styling করা যায়।
1. Chart.js-এ Default Tooltip
Chart.js-এ Tooltip ডিফল্টভাবে প্রতিটি ডেটা পয়েন্টের উপর হোভার করলে দেখায়। এটি সাধারণত ডেটা পয়েন্টের মান এবং লেবেল প্রদর্শন করে।
ডিফল্ট টুলটিপ উদাহরণ:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5],
backgroundColor: ['red', 'blue', 'yellow', 'green'],
borderColor: ['red', 'blue', 'yellow', 'green'],
borderWidth: 1
}]
},
options: {
responsive: true
}
});
এখানে, Chart.js ডিফল্টভাবে টুলটিপ প্রদর্শন করবে যখন ব্যবহারকারী পয়েন্টে হোভার করবে।
2. Custom Tooltip তৈরি করা
Chart.js-এ কাস্টম টুলটিপ তৈরি করতে plugins.tooltip কাস্টমাইজ করা হয়। আপনি টুলটিপের কনটেন্ট, পজিশন, স্টাইল এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।
কাস্টম টুলটিপ উদাহরণ:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5],
backgroundColor: ['red', 'blue', 'yellow', 'green'],
borderColor: ['red', 'blue', 'yellow', 'green'],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
enabled: false, // ডিফল্ট টুলটিপ নিষ্ক্রিয় করা
external: function(context) {
const tooltipModel = context.tooltip;
if (tooltipModel.opacity === 0) {
return;
}
// কাস্টম টুলটিপ পজিশন এবং কন্টেন্ট
const tooltip = document.getElementById('custom-tooltip');
tooltip.style.opacity = 1;
tooltip.style.left = tooltipModel.caretX + 'px';
tooltip.style.top = tooltipModel.caretY + 'px';
tooltip.innerHTML = '<strong>' + tooltipModel.title + '</strong><br>' + tooltipModel.body[0].lines[0];
}
}
}
}
});
এখানে:
enabled: falseদিয়ে ডিফল্ট টুলটিপ নিষ্ক্রিয় করা হয়েছে।externalফাংশন ব্যবহার করে কাস্টম টুলটিপ তৈরি করা হয়েছে। এই ফাংশনটি টুলটিপের অবস্থান এবং কন্টেন্ট কাস্টমাইজ করতে ব্যবহৃত হয়।
3. Custom Tooltip Styling
Chart.js-এর কাস্টম টুলটিপকে স্টাইল করতে আপনি CSS ব্যবহার করতে পারেন। টুলটিপের কন্টেন্ট, ব্যাকগ্রাউন্ড, বর্ডার, প্যাডিং, শ্যাডো ইত্যাদি স্টাইল করতে হবে।
উদাহরণ: Custom Tooltip Styling with CSS
<div id="custom-tooltip" style="position: absolute; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 10px; border-radius: 5px; display: none;"></div>
এখানে #custom-tooltip হল টুলটিপের কাস্টম ডিভ যা আমরা ব্যবহার করে টুলটিপ তৈরি করছি।
CSS স্টাইলিং:
#custom-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px;
border-radius: 5px;
pointer-events: none; /* Tooltip will not interfere with chart */
font-size: 14px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
display: none;
}
ব্যাখ্যা:
position: absolute;টুলটিপকে চার্টের উপর অবস্থান নির্ধারণ করতে সহায়তা করে।background: rgba(0, 0, 0, 0.7);টুলটিপের ব্যাকগ্রাউন্ড কালো এবং অল্প স্বচ্ছ করা হয়েছে।box-shadowব্যবহার করে টুলটিপে কিছু শ্যাডো যুক্ত করা হয়েছে।display: none;দিয়ে কেবলমাত্র যখন টুলটিপের ডেটা থাকবে তখনই এটি দৃশ্যমান হবে।
4. Dynamic Custom Tooltip Content
কাস্টম টুলটিপের কনটেন্টও tooltipModel ব্যবহার করে ডাইনামিকভাবে পরিবর্তন করা যেতে পারে। আপনি এখানে ডেটা পয়েন্টের মান, লেবেল এবং অন্যান্য তথ্য যোগ করতে পারেন।
উদাহরণ: Dynamic Tooltip Content
plugins: {
tooltip: {
enabled: false, // ডিফল্ট টুলটিপ বন্ধ
external: function(context) {
const tooltipModel = context.tooltip;
if (tooltipModel.opacity === 0) {
return;
}
const tooltip = document.getElementById('custom-tooltip');
tooltip.style.opacity = 1;
tooltip.style.left = tooltipModel.caretX + 'px';
tooltip.style.top = tooltipModel.caretY + 'px';
const datasetIndex = tooltipModel.dataPoints[0].datasetIndex;
const label = tooltipModel.dataPoints[0].label;
const value = tooltipModel.dataPoints[0].formattedValue;
tooltip.innerHTML = `<strong>${label}</strong><br>${value} Votes<br>Dataset: ${datasetIndex}`;
}
}
}
এখানে:
tooltipModel.dataPointsথেকে টুলটিপের তথ্য নেওয়া হচ্ছে, যেমন label, formattedValue, এবং datasetIndex।innerHTMLএর মাধ্যমে টুলটিপের কন্টেন্ট ডাইনামিকভাবে তৈরি করা হচ্ছে।
5. Tooltip Callbacks ব্যবহার করা
Chart.js-এ callbacks ফাংশন ব্যবহার করে আপনি টুলটিপের কন্টেন্ট কাস্টমাইজ করতে পারেন, যেমন শুধুমাত্র নির্দিষ্ট তথ্য প্রদর্শন করা বা ফরম্যাট পরিবর্তন করা।
উদাহরণ: Tooltip Callbacks
options: {
plugins: {
tooltip: {
callbacks: {
title: function(tooltipItem) {
return 'Month: ' + tooltipItem[0].label; // কাস্টম টাইটেল
},
label: function(tooltipItem) {
return 'Votes: ' + tooltipItem.raw; // কাস্টম লেবেল
}
}
}
}
}
এখানে:
titleএবংlabelকলব্যাক ব্যবহার করে টুলটিপের টাইটেল এবং লেবেল কাস্টমাইজ করা হয়েছে।
সারাংশ
Chart.js-এ Custom Tooltip তৈরি এবং স্টাইলিং করার মাধ্যমে আপনি চার্টের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তুলতে পারেন। আপনি:
- Custom Tooltip তৈরি করতে পারেন এবং
externalফাংশন ব্যবহার করে টুলটিপের কন্টেন্ট এবং পজিশন কাস্টমাইজ করতে পারেন। - CSS ব্যবহার করে টুলটিপের স্টাইল পরিবর্তন করতে পারেন।
- Callbacks ব্যবহার করে টুলটিপের কন্টেন্ট এবং ডেটার ফরম্যাট কাস্টমাইজ করতে পারেন।
এটি আপনার ডেটা ভিজ্যুয়ালাইজেশনের অভিজ্ঞতাকে আরও উন্নত এবং ইন্টারেক্টিভ করে তোলে।
Read more
