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