Highcharts not plotting series correctly on secondary axis

Question

Hi I am using the Highcharts library to create a bar chart with a cumulative plot line as demonstrated in the jsFiddle below.

CHART DEMO

I am looking to have the cumulative series represented like the red line in the following image (with cumulative values plotted on the right-most axis):

SAMPLE OF DESIRED OUTPUT

As you can see the secondary Y Axis is flipped and is displaying the series index value rather than the actual cumuative values.

Here is the current code:

$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: Wikipedia.org'
    },
    xAxis: [{
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null,
            }
        },
        {
        opposite:true,
            title: {
                text: "Cumulative"
            }
    }],
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2008',
        data: [973, 914, 4054, 732, 34]
    }, {
        name: 'Cumulative',
        xAxis:1,
        type:"spline",
        data: [34, 732, 914, 1973, 4054]
    }
    ]
});

How can I correct this in order to plot the series as intended?

Thanks!

Is 'Cumulative' supposed to be the sum of each category's 1900 and 2008 values? — wergeld

wergeld wergeld · Accepted Answer · 2015-02-18T20:33:44

What you can do is after loading add a new series based on the sum of the 2 series added at creation:

    events: {
        load: function () {
            var s1900 = this.series[0].data;
            var s2008 = this.series[1].data;
            var newData = [];
            if (s1900.length == s2008.length) {
                for (var i = 0; i < s1900.length; i++) {
                    newData.push(s1900[i].y + s2008[i].y);
                }
            }
            this.addSeries({
                name: 'Cumulative',
                xAxis: 0,
                type: "spline",
                data: newData
            });
        }
    }

I am not sure why you want this on the opposite xAxis or why your curve in the linked image you supplied is not really the cumulative unless that is not what you really want. See live demo.

Note you are going to have to handle cases where not all points have a value or if one category is not in both series, etc etc etc.

Revised answer. Assuming you want to have the same categories on the alternate xAxis and do not want to share the same yAxis you can do:

...
        xAxis: [{
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        }, {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            opposite: true,
            title: {
                text: null
            }
        }],
        yAxis: [{
            min: 0,
            endOnTick: false,
            title: {
                text: 'Population (millions)',
                align: 'high'
            }
        }, {
            min: 0,
            opposite: true,
            reversed: true,
            endOnTick: true,
            title: {
                text: 'Cumulative Population (millions)',
                align: 'high'
            }
        }],
...

This sets it up so that you have identical xAxis categories (other ways to do this). See new demo.

Highcharts not plotting series correctly on secondary axis

1 Answers