CODEWITHSUNDEEP
javascriptchartschart.js
DataScienceNovice
DataScienceNovice

Reputation: 492

Re-creating this graph in ChartJS

enter image description here

Hi everyone, I'm trying to make a copy of this graph using the JS library ChartJS (the graph above was made with Python's Bokeh). As you can see, this isn't really a line graph - it's a scatterplot with connected lines. I'm struggling to recreate this in ChartJS - the library seems to be wanting to connect the dots with curves and fill in the area with the default 'line' chart type, and I'm not sure what to do with the 'scatter' type. Also, I haven't figured out how to make the background of colored as shown. I'd greatly appreciate any assistance or code samples.

Upvotes: 1

Views: 134

Answers (1)

uminder
uminder

Reputation: 26150

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.

Upvotes: 1

Related Questions