Highcharts overriding X or Y axis key for series data objects

Question

In the examples in the highchart docs I see you can define your data like so:

[{ x: 100, y: 3}, { x: 105, y: 4} ...]

But I have non standard keys like this:

[{ myCustomXKey: 100, myCustomYKey: 3}, { myCustomXKey: 105, myCustomYKey: 4} ...]

Surely there must be a way to use my custom keys rather than the standard "x" and "y", right? Can anyone help?

Answer 1

You can update the data series like this

 var dataServer = [{ myCustomXKey: 100, myCustomYKey: 3, myCustomZKey: 4 }, { myCustomXKey: 105, myCustomYKey: 4, myCustomZKey: 5 }, { myCustomXKey: 110, myCustomYKey: 5, myCustomZKey: 6 }, { myCustomXKey: 120, myCustomYKey: 6, myCustomZKey: 7 }] function initialize(dataServer) { //suppose you need x,y,z data var dataH = [];//creating array for chart for (var i = 0; i < dataServer.length; i++) { /*pushing objects into array*/ dataH.push({ x: dataServer[i].myCustomXKey, y: dataServer[i].myCustomYKey, z: dataServer[i].myCustomZKey }) } Highcharts.chart('container', { chart: { type: 'bubble', plotBorderWidth: 1, zoomType: 'xy' }, title: { text: 'update chart data from server data' }, series: [{ data: dataH //add the variable here }] }); } initialize(dataServer) 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>