Chartjs-Custom tooltip callback on one dataset (chartjs v 2.5)

by

0👍

✅

You use a really old version of Chart.js. You should first switch to the latest version (currently v3.5.1).

Please take a look at your amended and runnable code below and see how it could work using Chart.js v3.5.1.

new Chart('chart', {
  type: 'doughnut',
  data: {
    labels: ['One', 'Two', 'Three', 'Four', 'Five'],
    datasets: [{
        data: [5, 3, 7, 6, 7],
        backgroundColor: ["#f56954", "#00a65a", "#f39c12", "#00c0ef", "#3c8dbc"],
        hoverOffset: 4,
      },
      {
        data: [2, 4, 5, 4, 6],
        hidden: true
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        filter: ctx => ctx.datasetIndex == 0,
        callbacks: {
          title: ctx => {
            if (ctx.length) {
              var data = ctx[0].dataset.data;
              var value = data[ctx[0].dataIndex];
              var total = data.reduce((a, b) => a + b, 0);
              var percent = Math.round(value / total * 100);
              return value + " " + percent + "%";
            }
          },
          label: ctx => {
            var value = ctx.dataset.data[ctx.dataIndex];
            return "$" + (Math.round(value * 100) / 100).toFixed(2);
          },
          afterLabel: ctx => {
            var hiddenDataset = ctx.chart.config._config.data.datasets[1].data;
            var value = hiddenDataset[ctx.dataIndex];
            return value + " " + ctx.label;
          }
        },
        titleColor: "#fff",
        titleFontSize: 14,
        backgroundColor: "#000",
        bodyFontColor: "#fff",
        bodyFontSize: 14,
        bodySpacing: 4,
        displayColors: false
      }
    }
  }
});
canvas {
  max-height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>

Leave a comment