[Chartjs]-How to draw multiple line on y axis for same x axis in chartjs v2?

1👍

You can’t use multiple key values with Chart.JS because it is not meant to accept that data format however you can format incoming data to create a chart based on the two-line sample.

Here is the working demo: https://jsfiddle.net/adelriosantiago/esn2wjxv/27/
enter image description here

This is how data is prepared:

  1. Raw data in the wrong format is called rawData.
  2. The function getSingleProp transforms data (the second argument) so that only the property prop (the first argument) is extracted. This happens at the line:
data.map((i) => {
    return { y: i[prop], x: i.time }
})
  1. When calling Chart.JS we simply use getSingleProp("[the property we want]", rawData) as data resulting in the chart you are looking for.

Leave a comment