Cara mudah menampilkan custom tooltip di Chart.js v2
Secara default, jika anda menggunakan Chart.js, maka tooltip yang akan ditampilkan pada diagram anda adalah nilai dari dataset. Lalu bagaimanakah cara untuk menampilkan tooltip dengan format tampilan custom ?
Cara ini saya batasi hanya untuk Chart.js versi 2 saja, dikarenakan tampaknya Chart.js versi 1 sudah terlalu lama meskipun mungkin masih banyak yang menggunakan.
Untuk keperluan kali ini, saya hanya buat 1 buah canvas sebagai tempat untuk menampilkan diagram/chart beserta data dummynya. Kodenya kurang lebih seperti di bawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<canvas id="mychart">
Loading ...
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script>
(function () {
var ctx = document.getElementById("mychart");
var datas = {
labels: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
datasets: [
{
label: "Data A",
data: [10, 20, 30, 5, 65],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
]
}
]
};
var options = {};
var chr = new Chart(ctx, {
data: datas,
type: "pie",
options: options
});
})();
</script>
</body>
</html>
Silahkan perhatikan hasil dari kode di atas. Tooltip yang muncul pada saat anda meng-hover diagram di atas adalah berupa nama data beserta nilainya.
Baca juga :
20 VS Code Extensions pilihan untuk Web/Frontend Developer/Programmer 2023
Untuk menampilkan custom tooltip, yang harus dilakukan adalah dengan mengaturnya pada options tooltips. Mirip dengan Chart.js versi 1, bedanya, jika pada versi 1 anda bisa mencustom template-nya, maka pada versi 2 ini anda harus meng-coding-nya langsung pada callback label nya. Strukturnya kurang lebih seperti berikut.
var options = {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
//kode di sini, return harus berupa string yang ingin ditampilkan
}
}
}
};
tooltipItem adalah object yang dikirimkan/berikan pada saat
user meng-hover diagram. Object tooltipItem ini berupa :
data
yaitu keseluruhan data dari diagram. Untuk contoh di atas, data ini adalah datas.
Silahkan buat fungsi anda sendiri ada callback label di atas. Ingat, nilai return yang dihasilkan adalah yang akan ditampilkan.
Misalkan saya ingin agar nilai yang muncul adalah nama_data : nilai (persentase %). Maka fungsi callback dapat diatur sebagai berikut:
function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var val = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return label + ':' + val + ' (' + (100 * val / 130).toFixed(2) + '%)';
}
Berikut ini adalah kode dan hasil akhirnya.
Bagaimana mudah sekali bukan.
Sekian dan selamat mencoba.