Bar chart - Bar padding and alignment

Question

I have a stacked percent bar chart that shows 3 bars.

JSFiddle: https://jsfiddle.net/Lr0bszj6/

For some reason, the bars have a lot of space among them and are not aligned to the label (only the middle one).

Setting a fixed height and messing with pointPadding I can get closer to what I want, but the bars are still not aligned:

Any ideas? Is setting a fixed height the right thing to do here?

Answer 1

You can set grouping to false either on all series, or in plotOptions, which will take care of the issue you are having:

plotOptions: {
    series: {
        grouping: false
    }
}

Highcharts.chart('container', {
    chart: {
        type: "bar",
        backgroundColor: "rgba(0, 0, 0, 0)",
        //height: '200px',
        //margin: [40, null, null, null]
    },
    title: {
        text: "Bars",
        align: "left"
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    yAxis: [{
        title: {
            text: ""
        },
        min: 0
    }],
    legend: {
        enabled: false
    },
    series: [{
            data: [{
                name: "Bar1",
                y: 9994708.36
            }],
            name: "Capacidade de Recebimento Ociosa",
            color: "#DDD",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "receiving",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar1",
                y: 5291.64
            }],
            name: "Capacidade de Recebimento Usada",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "receiving",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar2",
                y: 9472.63
            }],
            name: "Capacidade de Movimento Ociosa",
            color: "#DDD",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "movement",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar2",
                y: 4002.37
            }],
            name: "Capacidade de Movimento Usada",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "movement",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar3",
                y: 4260.82
            }],
            name: "Capacidade de Bar3 Ociosa",
            color: "#DDD",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "expedition",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar3",
                y: 3124.18
            }],
            name: "Capacidade de Bar3 Usada",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "expedition",
            stacking: "percent"
        }
    ],
    xAxis: {
        type: "category",
        tickPositions: [0,1,2]
    },
    plotOptions: {
        series: {
            grouping: false
        }
    }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Working JSFiddle example: https://jsfiddle.net/ewolden/Lr0bszj6/12/