CODEWITHSUNDEEP
javascripthighcharts
Kajymo
Kajymo

Reputation: 33

Highcharts: Implement a second y-axis related to the first y-axis

For my graph, I have a single y-axis (y1), and I am trying to add a second axis (y2) which is a scaled version of y1.

Simply put, is it possible to do a graph like this. But I want a second axis, with the same scaling ratio, but in different units (i.e. that is multiplied by some k).

I have tried to just change the label on the yAxis:

` labels: {
                format: '$ {value* price} ',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },`

But this hacky way does not seem to work for me.

In my case, I have a graph of percent change on y1, is it possible to put the price on y2?

I do not want to add another set of lines since I am already using 10, which would mean I would need 20 lines in total

Any help would be greatly appreciated!

Upvotes: 1

Views: 44

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You need to link the second axis to the first by linkedTo property and use formatter function to display some custom scale:

yAxis: [{}, {
    opposite: true,
    labels: {
        formatter: function() {
            return this.value * 1000
        }
    },
    linkedTo: 0
}]

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

API Reference:

https://api.highcharts.com/highcharts/yAxis.linkedTo

https://api.highcharts.com/highcharts/yAxis.labels.formatter

Upvotes: 1

Related Questions