CODEWITHSUNDEEP
highcharts
Mike
Mike

Reputation: 8100

HighCharts Multiple Y-Axes

I'm relatively new to HighCharts, and I would like to have two Y-axes where the data is always expressed in terms of the left-hand (primary) Y-Axis, but there is a constant function whereby you can translate the data into the terms on the right-hand (secondary) Y-Axes.

Take, for example, http://jsfiddle.net/M2EVb/

It's a constant well-known function to translate from Fahrenheit to Celsius. Even though I have specified the Primary Y-Axis as ranging from 32 to 212 with a tick interval of 18, and the Secondary Y-Axis as ranging from 0 to 100 with a tick interval of 10, the two axes don't line up properly; likely due to the "cels" data. But the point is that I would like to have the "cels" data just be another set of Fahrenheit temps, and have the right-hand Y-Axis values be the proper Celsius "translations" of their respective Fahrenheit values, and always show up.

Upvotes: 2

Views: 5280

Answers (1)

Ben Vassmer
Ben Vassmer

Reputation: 21

Use the label's formatter function in the yAxis configuration to convert your yAxis ticks from F to C like this:

yAxis: [{
        title: {
            text: 'Temperature (C)'
        },
        labels: {
              formatter: function() {
                    return YourConversionFunction(this.value) +' C';
              }
        }
}]

Make sure you are defining your Series using the same dataset (the F data):

series: [{
        type: 'area',
        name: 'Temp (F)',
        data: Far_TempData,
        yAxis: 0,
        xAxis: 0
    }, {
        type: 'area',
        name: 'Temp (C)',
        data: Far_TempData,
        yAxis: 1,
        xAxis: 0,
        lineWidth:0,
        fillOpacity: 0.01,
        visible:true
    }]

Upvotes: 2

Related Questions