Stacked Bar chart with multiple yAxis

Question

I am trying to add secondary y-axis on a stacked bar chart. I want the y-axis corresponding to the provided categories.

jsfiddle - http://jsfiddle.net/akshayasharma/qf3escqn/2/

$(function () {
    Highcharts.chart('container', {
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Average temperature and rainfall of first quarter'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: [{
            categories: ['Rainfall', 'Temperature'],
            crosshair: true
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            align: 'center',
            verticalAlign: 'bottom',
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Jan',
             type: 'column',
            data: [49.9, 7]
        }, {
            name: 'Feb',
             type: 'column',
            data: [71.5, 6.9]
        }, {
            name: 'Mar',
             type: 'column',
            data: [106.4, 9.5]
        }]
    });
});

In my above example, I want only two stacked bars- one showing Rainfall and another showing temperature and these stacked bar should associated to different y-axis. Temperature should respect primary y-axis (marked for degree C) and Rainfall should respect secondary y axis (marked for mm).

Each stack will show the value corresponding to respective month's Rainfall/temperature.

Can someone please tell me how to assign yAxis for Rainfall and Temperature. As I have series data as an array of series data of months (Jan, Feb and Mar) while I want my yaxis specific to provided category which is Rainfall and Temperature.

morganfree morganfree · Accepted Answer · 2016-11-23T21:15:35

It's possible, but you can assign a series to an axis - so you need to split your series as below:

series: [{
  name: 'Jan',
  id: 'j',
  data: [
    [0, 49.9]
  ],
  colorIndex: 0
}, {
  linkedTo: 'Jan',
  data: [
    [1, 7]
  ],
  colorIndex: 0,
  yAxis: 1
}, {
  id: 'f',
  name: 'Feb',
  data: [
    [0, 71.5]
  ],
  colorIndex: 1,
}, {
  linkedTo: 'f',
  data: [
    [1, 6.9]
  ],
  colorIndex: 1,
  yAxis: 1
}, {
  id: 'm',
  name: 'Mar',
  data: [
    [0, 106.4]
  ],
  colorIndex: 2
}, {
  linkedTo: 'm',
  data: [
    [1, 9.5]
  ],
  colorIndex: 2,
  yAxis: 1
}]

example: http://jsfiddle.net/qf3escqn/4/

Stacked Bar chart with multiple yAxis

1 Answers