custom tooltip Chart.js

by omamesh

HTML

<script src="Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<div style="width: 500px;height: 300px">
  <canvas id="mychart"></canvas>
</div>

JavaScript

(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 = {
    responsive: true,
    hover: {
      mode: 'label',
    },
    tooltips: {
      enabled: true,
      callbacks: {
        label: 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) + '%)';
        }
      }

    }
  };


  var chr = new Chart(ctx, {
    data: datas,
    type: 'pie',
    options: options,
  });

})();