> ## Content Index > Fetch the complete content index at: https://debug.my.id/llms.txt > Use this file to discover other available public pages before exploring further. # Cara mudah menampilkan custom tooltip di Chart.js v2 - URL: https://debug.my.id/custom-tooltip-charjs2/ - Published: 2016-09-26T10:14:00.000Z - Updated: 2025-06-24T15:46:03.000Z - Author: Tukang Debug - Tags: JavaScript, Tip/trik 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](http://sinau-webhtml.blogspot.co.id/2016/09/custom-tooltip-charjs2.html?ref=debug.my.id) 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: ```html Static Template Loading ... ``` Silakan perhatikan hasil dari kode di atas. Tooltip yang muncul pada saat anda meng-hover diagram di atas adalah berupa nama data beserta nilainya. 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. ```javascript 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: ```javascript 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, semoga yang sedikit ini bermanfaat.