Highcharts: Dual axis line and column with multiple series

1
votes

I was wondering if it is possible to build a chart in highcharts such as a dual-axis column and line but with multiple series data.

For instance, take the basic column chart that shows the monthly average rainfall for Tokyo, New York, London and Berlin: http://www.highcharts.com/demo/column-basic. Then also add the average temperature on the opposite Y-Axis for the four cities (basically adding four lines to the chart).

I know that's a lot of data to cram into one chart, but I was curious if it could be done. Sorry that I don't have a better example to show. I haven't had much luck so far playing around with JSFiddle. Thanks for the help.

2
javascriptchartshighcharts

2 Answers

2
votes

Yes, you can do this. You create your yAxis items:

            yAxis: [{
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            }, {
                min: 0,
                opposite: true, //optional, you can have it on the same side.
                title: {
                    text: 'Temp (K)'
                }
            }],

Then you need to tell the series which yAxis to use:

    series: [{
        name: 'Tokyo',
        yAxis: 1, //use new yAxis on right side.
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }, {
        name: 'New York',
        yAxis: 0, //if using primary (0) yAxis can leave this out.
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

    }, {
        name: 'London',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

    }, {
        name: 'Berlin',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

    }]

See demo here.

0
votes

In my case, even it was everything set as described, it seemed not to work well. So, just for troubleshooting reasons, I created a yAxis for each one of the series, and it displayed correctly, but with extra undesired axis. Since I've struggled a lot in this problem, I'm posting here hoping to help others with the same problem I had.

Fortunatelly, I've spotted that the chart lines were being stacked. So, just by removing/commenting that property everything works as expected:

plotOptions: {
    //series: {
    //  stacking: 'normal'
    //}
}