Skip to content
Advertisement

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

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

JavaScript

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:

JavaScript

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

JavaScript

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

Advertisement

Answer

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:

JavaScript

Then you can use your data arrays as you expected:

JavaScript

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

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement