Highcharts Stacked Bar: How to remove spacing between bars

Question

I'm working with the highcharts stacked bar and want to remove some space between the bars so I can make room for some text I am rendering.

I've tried pointPadding and groupPadding but those are not working. I've tried minPadding/maxPadding on the xAxis and that did not do anything as well.

Seems the only way get rid of that space is to change the width of the whole chart which is what I really don't want.

Here is my fiddle:

http://jsfiddle.net/nick1572/dfcysj39/

$("#profit-chart").highcharts({

        lang: {
            thousandsSep: ","
        },
        chart: {
            type: "column",
            style: {
                fontFamily: "Open Sans, sans-serif"
            }
        },
        legend: {
            enabled: false
        },
        title: {
            text: ""
        },
        xAxis: {
            //minPadding: 20, Not working here
            //maxPadding:1, Not working here either

            categories: [ "other business", "somekind of business profit" ],
            labels: {
                style: {
                    color: "#333333",
                    fontSize: "15px"
                }
            }
        },
        yAxis: {
            gridLineDashStyle: "longdash",
            title: {
                text: "Dollars"
            },
            labels: {
                enabled: true,
                formatter: function() {
                    return "$" + Highcharts.numberFormat(this.value, 0, "", ",");
                }
            }
        },
        tooltip: {
            enabled: false
        },
        plotOptions: {


            column: {
                stacking: "normal",
                dataLabels: {
                    enabled: true,
                    color: "white",
                    inside: true,
                    useHTML: true,
                    style: {
                        fontSize: "18px",
                        fontWeight: "600"
                    }
                }
            },
            series: {
                //pointPadding: 0,
                //groupPadding: 0, this does not work
                animation: {
                    complete: function() {

                    }
                },

                 pointWidth: 145
            }
        },

        series: [ {
            color: "#327631",
            data: [ 0, 850 ],
            stack: "female",
            dataLabels: {
                enabled: true,
                formatter: function() {
                    if (0 != this.y) return "$" + Highcharts.numberFormat(this.y, 0); 


                    else return null;
                }
            }

            }, {
            color: "#ADC9AD ",
            data: [ 10000, 10000 ],
            stack: "female",
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return "$" + Highcharts.numberFormat(this.y, 0);
                }
            }
        }]

        },

        function (chart) { // on complete

                chart.renderer.text('<span class="bracketed">}</span>  <em>Profit</em>', 870, 85)
                    .css({
                        color: 'green',
                        fontSize: '24px',
                        x: 200
                    })
                    .add();


    });//End HighCharts Call

Thanks in advance!

Birgit Martinelle Birgit Martinelle · Accepted Answer · 2014-10-10T14:13:40

it seems that the point width setting is conflicting with the groupPadding and pointPadding .. if you remove the pointWidth: 145 in the series and add groupPadding and pointPadding to the column you will get the gap removed. on the flipside however the bars will take up the entire available width of your chart.

 column: {
         stacking: "normal",
         groupPadding: 0,//add here
         pointPadding: 0,//add here
         ...
}

http://jsfiddle.net/dfcysj39/9/

Highcharts Stacked Bar: How to remove spacing between bars

2 Answers