Multiple y-axes for column graph categories in highcharts

Question

I ran into a slight problem. Im trying to make a column graph like this one using highcharts: http://www.highcharts.com/demo/column-basic

The individual series are spring, summer, fall and winter and as categories I use various varibales such as air humidity, pressure etc. Now the problem is that I wanted to use multiple y-axes, because obviously humidity for example ranges between 0 and 100, pressure is around 1000 and they have different units as well. In the documentation I found that it is possible to set multiple axes but the problem is that it only shows how to specifiy axis for each series. In this case however, I obviously do not want separate axes for series (humidity is similiar in spring, summer etc.), but I want different axes for the individual categories. Does anyone know it this is possible and if how?

Answer 1

Yes that is possible, see http://www.highcharts.com/demo/combo-multi-axes

The trick is to use yAxis in your series, specifying an integer. As in the above example:

series: [{
            name: 'Rainfall',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            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],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Sea-Level Pressure',
            type: 'spline',
            color: '#AA4643',
            yAxis: 2,
            data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
            marker: {
                enabled: false
            },
            dashStyle: 'shortdot',
            tooltip: {
                valueSuffix: ' mb'
            }

        }

Answer 2

I found this question via another recently posted (see Highcharts grouped bar charts with multiple axes).

In short, yes, you can absolutely have a column chart where certain series are assigned to different y-axes. Here is an example using the requirements in the question:

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Weather data'
        },

        xAxis: {
            categories: ['Spring','Summer','Fall','Winter']
        },

        yAxis: [{
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Percent'
            }
        },{
            allowDecimals: false,
            min: 0, max: 1000,
            title: {
                text: 'Pressure'
            },
            opposite: true
        }],

        series: [{
            name: 'Humidity',
            data: [10, 50, 30, 5]
        }, {
            name: 'Barometric pressure',
            data: [550, 740, 655, 800],
            yAxis: 1
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 250px; margin: 0 auto"></div>

I hope this is helpful for users who come across this post.

Answer 3

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Weather data'
        },

        xAxis: {
            categories: ['Spring','Summer','Fall','Winter']
        },

        yAxis: [{
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Percent'
            }
        },{
            allowDecimals: false,
            min: 0, max: 1000,
            title: {
                text: 'Pressure'
            },
            opposite: true
        }],

        series: [{
            name: 'Humidity',
            data: [10, 50, 30, 5]
        }, {
            name: 'Barometric pressure',
            data: [550, 740, 655, 800],
            yAxis: 1
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 250px; margin: 0 auto"></div>