CODEWITHSUNDEEP
javascriptjqueryhighcharts
ConfusedDeveloper
ConfusedDeveloper

Reputation: 7001

Swap Y Axis in Highchart

I have a chart with multiple Y-Axis. One of them is Primary Y Axis and rest of the two are Secondary Y-Axis as shown in below fiddle:

JSFiddle

Above code sample renders chart as shown In below image:

enter image description here

Now dynamically (say on button click event) I want to swap position of two secondary Y-Axis so the chart with swapped axis looks like below image:

enter image description here

If you see in above chart, both secondary Y-Axis are swapped.

I don't know how to figure it out. I tried with changing the value of index for each Y-Axis as shown below. But that doesn't seems to work. 

$('#buttonSwap').click(function() {
    console.log(currChart);
  currChart.series[1].yAxis.index = 2;
  currChart.series[2].yAxis.index = 1;
});

Upvotes: 2

Views: 895

Answers (1)

ewolden
ewolden

Reputation: 5803

You can change the chart axis for a series by using the update function like this:

currChart.update({series: [{}, {yAxis: '2'}, {yAxis: '1'}]}, true);

This will set series 1 to use axis 2, and series 2 to use axis 1.

To change back and forth you could have a toggle like this:

var axis = '1';
$('#buttonSwap').click(function() {
  if(axis == '1') {
    currChart.update({series: [{}, {yAxis: '2'}, {yAxis: '1'}]}, true);
    axis = '2';
  } else {
    currChart.update({series: [{}, {yAxis: '1'}, {yAxis: '2'}]}, true);
    axis = '1';
  }
});

Working example: http://jsfiddle.net/ewolden/2Lwks0gt/35/

Upvotes: 1

Related Questions