[Chartjs]-Re-creating this graph in ChartJS

by

1👍

✅

In a line chart, straight lines can be obtaines through the option lineTension that needs to be defined on your dataset. Choose zero as shown below.

datasets: [{
  ... 
  lineTension: 0
}]

lineTension: Bezier curve tension of the line. Set to 0 to draw straight lines.

In order to obtain colored rectangles spread over the entire chart, this can be done using chartjs-plugin-annotation.js as explained in this answer.

Leave a comment