CODEWITHSUNDEEP
highcharts
Andrei Osmolovskii
Andrei Osmolovskii

Reputation: 117

groupPadding for stacking series in Highcharts

In short, I need to somehow enable groupPadding for stacked series. It looks a little bit odd, but this is what you can do in PowerPoint if you set series overlap to 0:enter image description here

With series overlap set to 100, they would be on top of each other like in Highcharts with stacking set to e.g. normal. To me, it seems you are not allowed to move stacking columns horizontally relative to each other in Highcharts. But maybe I am missing something or there is a workaround? Thanks!

Upvotes: 0

Views: 100

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

You can create an additional hidden series with the same stack as the upper series. Example:

Highcharts.chart('container', { 
    chart: {
        type: 'column'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            pointPadding: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y}%'
            }
        }
    },
    series: [{
        data: data2,
        color: 'gray'
    }, {
        data: data1,
        color: 'rgba(0,0,0,0)',
        linkedTo: 'data1',
        dataLabels: {
            enabled: false
        }
    }, {
        id: 'data1',
        data: data1,
        stack: 'A',
        color: 'green'
    }]
});

Live demo: http://jsfiddle.net/BlackLabel/rkvs8cy7/

API Reference: https://api.highcharts.com/highcharts/series.column.stack

Upvotes: 2

Related Questions