How to use Highcharts React to create chart with multiple lines for same XAxis?

Question

I have a dataset containing a date value, and 3 other values. For example:

{
    "minimum": "71",
    "maximum": "74",
    "meanAverage": "72",
    "dateTime": "2018-03-28T13:46:00"
},
{
    "minimum": "57",
    "maximum": "87",
    "meanAverage": "71",
    "dateTime": "2018-03-28T18:00:01"
},

I'd like to create a chart using react highcharts with the dates in the x axis, and then 3 lines on the y axis showing the corresponding 3 values for all the dates.

So far I thought using 3 different arrays to pass to series.data. Each array would have the x value (date) and then the y value. For the minimuns, it would be:

['2018-03-28T13:46:00', '71']
['2018-03-28T18:00:01', '57']
...

And in the options object, I would have something like:

series: [
          {
            data: minimuns
          },
          {
            data: maximuns
          },
          {
            data: meanAverages
          },
        ]

But this isn't working and I'm having some trouble finding the info to correctly do this. Any help?

magdalena · Accepted Answer · 2022-05-04T16:45:31.473

You need to parse the json object into a suitable data format.

See the docs for accepted data formats: https://api.highcharts.com/highcharts/series.line.data

Notice, that y value should be a number.

The example config:

const json = '[{"minimum": 71, "maximum": 74, "meanAverage": 72, "dateTime": "2018-03-28T13:46:00"}, {"minimum": 57,"maximum": 87, "meanAverage": 71, "dateTime": "2018-03-28T18:00:01"}]',

  parsed = JSON.parse(json);

const minimum = [];
parsed.forEach(data => {
  minimum.push([new Date(data.dateTime).getTime(), data.minimum])
})

const maximum = [];
parsed.forEach(data => {
  maximum.push([new Date(data.dateTime).getTime(), data.maximum])
})

const meanAverage = [];
parsed.forEach(data => {
  meanAverage.push([new Date(data.dateTime).getTime(), data.meanAverage])
})

Then you can use your data arrays as you expected:

  series: [{
      data: minimum
    },
    {
      data: maximum
    },
    {
      data: meanAverage
    }
  ]

Demo: https://jsfiddle.net/BlackLabel/2ncb83eh/

How to use Highcharts React to create chart with multiple lines for same XAxis?

1 Answers1