I was unsatisfied with the answer here: Multiple y-axes for column graph categories in highcharts

I understand that you can create multiple y-axes can select them using yAxis:0,1,2 etc. for each series. Is it possible to do this for groups of bar graphs?

In the following example, I want 3 groups (Count A, Count B, Percent) each with 4 people (John, Joe, Jane, Janet). How do I do that in addition to having the count groups on one axes and the percent group on the other?

$('#container').highcharts({
    chart: { type: 'column' },
    xAxis: { categories: ['Count A', 'Count B', 'Percent']},
    yAxis: [{ title: { text: 'Count' } }, { title: { text: 'Percent' }, opposite: true }],

    series: [{
        name: 'John',
        data: [5, 3, 0.4],
    }, {
        name: 'Joe',
        data: [3, 4, 0.6],
    }, {
        name: 'Jane',
        data: [2, 5, 0.7],
    }, {
        name: 'Janet',
        data: [3, 0, 0.8],
    }]
});

I was unsatisfied with the answer here: Multiple y-axes for column graph categories in highcharts

I understand that you can create multiple y-axes can select them using yAxis:0,1,2 etc. for each series. Is it possible to do this for groups of bar graphs?

In the following example, I want 3 groups (Count A, Count B, Percent) each with 4 people (John, Joe, Jane, Janet). How do I do that in addition to having the count groups on one axes and the percent group on the other?

$('#container').highcharts({
    chart: { type: 'column' },
    xAxis: { categories: ['Count A', 'Count B', 'Percent']},
    yAxis: [{ title: { text: 'Count' } }, { title: { text: 'Percent' }, opposite: true }],

    series: [{
        name: 'John',
        data: [5, 3, 0.4],
    }, {
        name: 'Joe',
        data: [3, 4, 0.6],
    }, {
        name: 'Jane',
        data: [2, 5, 0.7],
    }, {
        name: 'Janet',
        data: [3, 0, 0.8],
    }]
});

• javascript
• highcharts
• column-chart

• do you want stacked column bar chart... jsfiddle/k7naaqmn – Udhay Titus Commented Aug 11, 2016 at 11:08

2 Answers 2

So here's my solution to your problem. I hope this is what you are looking for and I hope you find this helpful.

When you want to put the data into three categories with two different yAxis' you'd have to split it up in series like this. The percent is linked to the series with the values.

If you want it back to a column chart, just change the chart type to column.

http://jsfiddle/henrikskar/j1o450z5/

series: [{
       name: 'John',
       id: 's1',
       data: [5, 3],
  },{
        //Links to id s1
     linkedTo: 's1',
     name: 'John',
     data: [
           //Puts 0.4 percent to the third category which is in the second array position
           //of the categories
           [2, 0.4]
     ],
     //Assigns the percent to the second yAxis
     yAxis: 1,
     color: Highcharts.getOptions().colors[0]
  },

Yes, this is absolutely possible, and you were on the right track with your research of multiple y-axes.

Below is a code snippet based on Highcharts' demo of stacked and grouped columns. I added a second y-axis and copied some of the demo data to assign to that axis.

Per your requirements, you'll find two sets, or stacks, of data assigned to the first/default y-axis, and a third set assigned to the second/opposite y-axis.

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

        chart: {
            type: 'column'
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },

        yAxis: [{
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },{
            allowDecimals: false,
            min: 0, max: 100,
            title: {
                text: 'Percentage of fruits'
            },
            opposite: true
        }],

        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'number'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'number'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'number2'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'number2'
        },{
            name: 'John',
            data: [45, 30, 25, 70, 5],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Joe',
            data: [25, 15, 40, 5, 5],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Jane',
            data: [10, 50, 30, 5, 10],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Janet',
            data: [20, 5, 5, 20, 80],
            stack: 'percentage',
            yAxis: 1
        }]
    });
});

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

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

One piece of advice: as with line charts on different axes, you need to be clear in your documentation, color choices, or chart labels so that users know which values correspond to which axis. This is particularly needed for columns, as users will naturally pare the heights of each column to its neighbor.

I hope this is helpful for you.