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:
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 :

{    
    // X Value of the tooltip as a string
    xLabel: String, 
    // Y value of the tooltip as a string
    yLabel: String,
    // Index of the dataset the item comes from
    datasetIndex: Number,
    // Index of this data item in the dataset
    index: Number
} 

data
Adalah 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.