score:1

Accepted answer

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.


Related Query

More Query from same tag