Can I use two "categories" arrays in a stacked bar chart?

Question

I'm using a stacked percentage bar chart in Highcharts. (This jsfiddle is similar to our chart, derived from an example on the Highcharts site.)

What I'd like to do is add another set of "category" labels on the right side of the chart. Where the left side has labels for each bar, I'd like to show an average on the right. (Calculating this average and putting it in the Highcharts configuration data is done on the server side; in the fiddle I've just hard-coded some dummy values.)

I've tried using multiple x-axis configurations, with the averages categories marked opposite: true to put them on the right side. I can see that adding this is changing the chart, especially if I don't put them on opposite, but the labels don't actually show in any configuration I've tried. Is this possible? If so, what do I need to do that I'm not yet doing?

This is the configuration in the jsFiddle example:

$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: [{
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    }, {
        title: 'Avg.',
        categories: [3.0, 3.3, 3.6, 2.6, 3.0],
      opposite: true
    }],
    yAxis: {
        min: 0,
        title: {
            text: 'Percent fruit consumption'
        }
    },
    plotOptions: {
        series: {
            stacking: 'percent'
        }
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }]
});

This discussion in the Highcharts forums suggest it's not possible but could be at some indefinite future time. — pjmorse
Yes, you can use a second axis, and supply the second set of categories to that second axis. — jlbriggs
Oh, I see you have that part :) What you're missing is that you need to either link the 2nd axis to the 1st, or one of the data series has to be attached to it. So, for this, add linkedTo: 0 on your 2nd axis. Fiddle: jsfiddle.net/jlbriggs/z4zkm8v5/2 — jlbriggs
@jlbriggs can you post that as an answer? You're right, the fiddle demonstrates it working, and I'm confident it will work in my app once I convince Rails to pass the second axis down through a few layers of abstraction to Highcharts. ;-) — pjmorse

jlbriggs jlbriggs · Accepted Answer · 2016-05-11T12:49:11

You have the correct axis set up, but currently the chart doesn't know what to do with the second axis.

Highcharts requires that an axis has either a data series attached to it, or that it is linked to another axis that does, in order to display it.

If you add a linkedTo property, it will work as required:

xAxis: [{
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}, {
    linkedTo: 0, // <-- now the chart will show it, as long as axis 0 is able to be shown
    title: 'Avg.',
    categories: [3.0, 3.3, 3.6, 2.6, 3.0],
    opposite: true
}]

Updated fiddle:

http://jsfiddle.net/jlbriggs/z4zkm8v5/2/

Can I use two "categories" arrays in a stacked bar chart?

1 Answers