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

by

1👍

✅

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>

Leave a comment