chart.js 3 stacked bar chart - tooltip showing for zero values

Question

I have a stacked bar chart, and when I hover the mouse near the bottom of bars the tooltip shows zero values like so:

... I only want the tooltip to show on non-zero bars like this:

The JSON for the chart looks like this:

... i.e. "6-10 hours" is a dataset, and the data has 0's in it where there are no values (so it aligns with the correct bar)

Other than the tooltips, the chart functions correctly. Is there any way to remove 0 values from tooltips?

score 1 · Accepted Answer · answered Dec 18 '21 at 08:22

You can define a tooltip.filter callback function that returns false for zero values, true otherwise.

Please take a look at below runnable code snippet and see how it works.

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'Dataset',
      data: [0, 2, 0, 3],
    }]
  },
  options: {
    responsive: false,
    plugins: {
      tooltip: {   
        mode: 'dataset',
        filter: tooltipItem => tooltipItem.dataset.data[tooltipItem.dataIndex] > 0
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<canvas id="myChart"></canvas>

chart.js 3 stacked bar chart - tooltip showing for zero values

1 Answers1