How to make rectangle in chart.js

Question

I am trying to put rectangle to make a upper-lower range/level in chart.js, like in image

Although I am able to make it by drawing two line in this example

Answer 1

There is already a Chart.js plugin exists called chartjs-plugin-annotation, by which you can achieve that much easily.

Using that plugin, you'll need to create a box annotation (rectangle), as such :

options: { //your chart options
   annotation: {
      annotations: [{
         type: 'box',
         drawTime: 'beforeDatasetsDraw',
         yScaleID: 'y-axis-0',
         yMin: 40,
         yMax: 50,
         backgroundColor: 'rgba(0, 255, 0, 0.1)'
      }]
   }
}

^{note: this is the minimum options required to draw that rectangle, and you can find more options here.}

Here is a working fiddle.