How to set the second yAxis scale according to the data from the first yAxis

Question

I have an odd request. My boss wants me to improve the existing chart with a second axis.

The blue area should determine the scale of the second axis, as a percentage of completion for reading the green area. The value of 100% should be at the maximum of the blue area . I can get the highest value of the blue area without any problems, but I don’t know how to set the properties of the second axis according to this value. The fact is that the second axis has no associated data, so it is not shown ...

Any idea?

PS: I tried to be as clear as possible, but perhaps it was not so. Feel free to tell me if you need more explanation.

Answer 1

You can use axis.linkedTo to get the second axis and format the data to get percent formatted data.

I do not change the series data, changing only the text shown in the second yAxis scale, tooltip and data labels.

yAxis: [{ // Default options }, { linkedTo: 0, opposite: true, labels: { formatter: function () { return formatPercent(this.value); } } }] 

JsFiddle example: http://jsfiddle.net/uPHZx/