Using Highcharts to show multiple stacked bar charts next to each other

Question

Trying to find a way to read two arrays into the Highcharts series, for 4 charts. This is example code I tried to adapt from a regular bar chart:

        var charts = [],
        $containers = $('table td'),
        datasets = [
                    {
                        name: 'Global',
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
                    }, 
                    {
                        name: 'Region',
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
                    }, 
                    {
                        name: 'Role',
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
                    }, 
                    {
                        name: 'Industry',
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
                    }];                     

        $.each(datasets, function(i, dataset) {
            console.log(dataset);
            charts.push(new Highcharts.Chart({

                chart: {
                    renderTo: $containers[i],
                    type: 'bar',
                    marginLeft: 50,
                    marginBottom: 90
                },

                credits: {
                    enabled: false
                },

                title: {
                    text: dataset.name
                },

                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },

                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                series: [dataset]

            }));
        });

and then this is my HTML:

<table>
    <tr>
        <td id="first"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

How do I get the two arrays for stacked bars into highcharts ? Thanks in advance.

Paweł Fus Paweł Fus · Accepted Answer · 2015-02-27T11:54:30

When you need stacked bar charts, then each dataset needs to be a separate series. Demo: http://jsfiddle.net/n9xvof2y/1/

Suggested format:

    datasets = [{
        name: 'Global',
        data: [
            [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        ]
    }, {
        name: 'Region',
        data: [
            [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        ]
    }, {
        name: 'Role',
        data: [
            [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        ]
    }, {
        name: 'Industry',
        data: [
            [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        ]
    }];

Series options:

        series: [{
            name: dataset.name,
            data: dataset.data[0]
        }, {
            name: dataset.name,
            data: dataset.data[1]
        }]

If you need just one legend item for both series, use linkedTo option: http://jsfiddle.net/n9xvof2y/3/

Using Highcharts to show multiple stacked bar charts next to each other

1 Answers