CODEWITHSUNDEEP
javascripthighcharts
Andy Jessop
Andy Jessop

Reputation: 287

Use different object property names for x and y axes

I have some data that is in this format:

[{"a": 123, "b": 234},{"a": 345, "b": 456}]

And I'm trying to represent this as a line chart with "a" as the x-axis, and "b" on the y-axis. But I can only get this to work if I convert the labels to "x" and "y", like this:

[{"x": 123, "y": 234},{"x": 345, "y": 456}]

That's clearly undesirable for large datasets. How can I get Highcharts to understand that I want to use different property names for the x and y axes?

Upvotes: 0

Views: 207

Answers (2)

ppotaczek
ppotaczek

Reputation: 39139

You can map your data to the format required by Highcharts. For example:

Highcharts.chart('container', {
    series: [{
        data: data.map(dataEl => [dataEl.a, dataEl.b])
    }]
});

Live demo: http://jsfiddle.net/BlackLabel/z4yr7vxs/

API Reference: https://api.highcharts.com/highcharts/series.line.data

Upvotes: 1

Jose Manuel de Frutos
Jose Manuel de Frutos

Reputation: 994

A very simple way would be:

o[ new_key ] = o[ old_key ];
delete o[ old_key ];

Upvotes: 1

Related Questions