Sinau Coding
Berbincang santai perihal pemrograman
Tukang ketik yang sedang belajar pemrograman
10:14 AM

Cara mudah menampilkan custom tooltip di Chart.js v2

Chart.js

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:

Silahkan 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.


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.


Hasil custom tooltip

Bagaimana mudah sekali bukan.

Sekian dan selamat mencoba.

Komentar

Load more

Terbaru

Cara install Postgresql di MacOS
Postgresql adalah salah satu object-relational database open source yang memiliki banyak fitur enterprise layaknya Or...
Cara install npm di Laravel
aravel adalah sebuah framework untuk webapp yang berbasis php, sedangkan npm adalah sebuah package manager untuk node...
Cara install MariaDB di MacOS dengan menggunakan Homebrew
MariaDB selain tersedia di Windows dan Linux, juga tersedia di MacOS dan dapat diinstall dengan menggunakan homebrew....
Cara insert data ke dalam list atau table tanpa menutup Modal
Desain halaman dan dialog tambah data biasanya adalah, User klik tombol yang akan memunculkan dialog, dimana dialog a...