[Chartjs]-Stacked bar chart starting from 0 – ChartJS React

by

1👍

✅

Your solution to create a dataset with the difference between the lower value and upper value was how I had to resolve this problem as well. As for the tooltip on hover, I created a label callback within options.tooltips.callbacks like so:

options: {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var label = data.datasets[tooltipItem.datasetIndex].label;
        if (label === 'With duplicates') {
          var total = tooltipItem.xLabel + data.datasets[0].data[tooltipItem.datasetIndex];
          return label + ': ' + total;
        }
        return label + ': ' + tooltipItem.xLabel;
      }
    }
  }
}

The parameters tooltipItem and data are automatically populated for you using the dataset sent to the <canvas> tag (I suggest logging those objects within the callback during testing just to peek at what they include). You can find all kinds of interesting things you can do with the tooltips here: https://www.chartjs.org/docs/latest/configuration/tooltip.html

Leave a comment