Chartjs-Chart js Tooltips for my graph is displaying all data as a group while hovering on a single bar

by

0👍

✅

I cannot tell why this happens in your case because when I run your code, the tooltip always only displays the value of a single bar. You can however explicitly define options.plugins.tooltip.mode: 'nearest' (or any other suitable mode) in order to obtain the desired behavior.

For further information, consult Tooltip Configuration from the Chart.js documentation.

Please take a look at your amended and runnable code below.

const sales = [120, 130, 125, 132, 115, 96, 87, 92, 105, 111, 105, 142];
const profit = [12, 13, 5, 18, 6, 3, 0, 0, 0, 8, 13, 25];
const loss = [0, 0, 0, 0, 0, 0, 6, 12, 8, 0, 0, 0];

new Chart("mychartjs", {
  type: "bar",
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
        label: "Sales",
        backgroundColor: 'blue',
        borderWidth: 0,
        data: sales
      },
      {
        label: "profit",
        backgroundColor: "green",
        borderWidth: 0,
        data: profit
      },
      {
        label: "loss",
        backgroundColor: "red",
        borderWidth: 0,
        data: loss
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        display: false,
        boxWidth: 0
      },
      title: {
        display: false,
      },
      tooltip: {
        mode: 'nearest'
      }
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
<canvas id="mychartjs"></canvas>

Leave a comment