How do I add secondary axis to highstock charts?

Question

I'm still pretty wet behind the ears when it comes to javascript. I need some help adding a secondary axis that is something like revenue to a highstock chart that also uses $.getJSON (JSONP) to snag a json file to populate the data.

Check out the JSFiddle example here. And here is the sample data set to play with. And finally, an example of secondary axis in Highcharts.

$(function () {
    var seriesOptions = [],
        seriesCounter = 0,
        names = ['MSFT', 'AAPL', 'GOOG'],
        // create the chart when all data is loaded
        createChart = function () {

            $('#container').highcharts('StockChart', {

                rangeSelector: {
                    selected: 4
                },

                yAxis: {
                    labels: {
                        formatter: function () {
                            return (this.value > 0 ? ' + ' : '') + this.value + '%';
                        }
                    },
                    plotLines: [{
                        value: 0,
                        width: 2,
                        color: 'silver'
                    }]
                },

                yAxis: {
                floor: 0
            },

                plotOptions: {
                    series: {
                        compare: 'value'
                    }
                },

                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                    valueDecimals: 2
                },

                series: seriesOptions
            });
        };

    $.each(names, function (i, name) {

        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?',    function (data) {

            seriesOptions[i] = {
                name: name,
                data: data
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter += 1;

            if (seriesCounter === names.length) {
                createChart();
            }
        });
    });
});

Any help and explanations (so I can learn) is much appreciated. I'm still trying to learn how to tie jsonp and charting together, especially multiple series of data and json files.

Secondary Y-axis? if so, you just need to use an array. for example: yAxis:[{..axis1 properties..},{..axis 2 properties..}]. Just note that as long as no series attached to the axis, it will not show labels. just add the property "yAxis:n", to your series, where n is the axis key (first one is 0, second is 1...) — MorKadosh
So, I would need to add a new axis label and series attached to that label ideally. I did try to add a new label before, but no series attached so nothing showed. I guess that's why. — Fastidious
As @MorKadosh said you need to have an array of axis objects, then in the series object, refer to particualr yAxis. — Sebastian Bochan

Raein Hashemi Raein Hashemi · Accepted Answer · 2014-11-09T12:50:30

Write it like this:

yAxis: [{
    labels: { ... },
    title: { ... },
    ...
},
{
    labels: { ... },
    title: { ... },
    ...
}]

http://jsfiddle.net/5eem7a2a/1/

How do I add secondary axis to highstock charts?

1 Answers