CODEWITHSUNDEEP
javascriptchartshighchartsaxis
Justin Warner
Justin Warner

Reputation: 879

Highcharts Chart with Two Axis Not Scaling Correctly

I'm a bit stumped. A little new to Highcharts. I have a watered down version of the chart I'm making with the issue I'm seeing.

I have three values on two y-axis. The second y-axis is linked to the first to ensure they share the same scale.

However, when the first y-axis gets a value much larger than the second, the chart doesn't auto re-size and the data point goes off the chart.

http://jsfiddle.net/L8x4a7x1/

In this example, if you look at this series:

  {
    name: "Vals 0",
    type: 'column',
    yAxis: 1,
    data: [10, 200]
  }

The value 200 is off the chart, as the scale seems to only care about the spline y-axis.

Any idea why this is the case and what can be done to fix it?

Thanks!

Upvotes: 0

Views: 743

Answers (1)

Gayan Dasanayake
Gayan Dasanayake

Reputation: 2021

When an axis is linkedTo another it takes the extremes from the master. Since your master (first yAxis) is assigned to splines, you have 12 as max in master axis. So make the y-Axis with largest extremes the master.

series: [{
    name: "Vals 0",
    type: 'column',
    yAxis: 0,
    data: [10, 200]
}, {
    name: "Vals 1",
    type: 'spline',
    yAxis: 1,
    data: [4, 6]
}, {
    name: "Vals 2",
    type: 'spline',
    yAxis: 1,
    data: [3, 1]
}]

http://jsfiddle.net/6evnttmg/

Upvotes: 1

Related Questions