[Chartjs]-How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js

by

1👍

✅

You could define a second dataset that does nothing but drawing the gray space up to the limit of 100.

{
  backgroundColor: '#DDD',
  hoverBackgroundColor: '#DDD',
  data:  [100, 0, 0, 0, 100, 100],
  datalabels: {
    display: false
  }
},

Also make sure that only the x-axis has the option stacked: true.

Together with this, you’ll also need to adjust some other options. A tooltip.filter for example will prevent Chart.js from showing a tooltip for the second dataset.

tooltip: {
  filter: tooltipItem => !tooltipItem.datasetIndex
},

Please take a look at the StackBlitz with your amended code and see how it works.

Leave a comment