javascripthighcharts

Stacked Column chart bars overlapping when range of min and max is large


using the column chart with stacking on,

If I have a big disparity between min and max value in the series the low values are getting overlapped, is there a workaround to this?

See the Jan category in this fiddle for reproduction - both bars have a value but only one of them is visible in the chart, hovering over legend shows that they are overlapping. This only occurs when the max value in the series is multiple times larger than the min value, setting minimum size for the bar did not help either, they still overlap.

    Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
            'Oct', 'Nov', 'Dec'
        ]
    },

    plotOptions: {
        series: {
            stacking: 'normal'
        },
        column: {
            minPointLength: 3
        }
    },

    series: [{
        data: [
            27, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
            95.6, 5400.4
        ]
    }, {
        data: [
            25, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5,
            106.4, 129.2
        ]
    }],

    tooltip: {
        pointFormat: '{series.name}: <b>{point.y}</b> ' +
            '({point.percentage:.1f}%)<br/>'
    }
});

Fiddle: https://jsfiddle.net/onbx4pre/1/


Solution

  • You can simply add different minimum sizes minPointLength, so they won't have the same size.

    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            data: [
                27,
                71.5,
                106.4,
                129.2,
                144.0,
                176.0,
                135.6,
                148.5,
                216.4,
                194.1,
                95.6,
                5400.4
            ],
            minPointLength: 30 // <<<
        }, {
            data: [
                25,
                176.0,
                135.6,
                148.5,
                216.4,
                194.1,
                95.6,
                54.4,
                29.9,
                71.5,
                106.4,
                129.2
            ],
            minPointLength: 20 // <<<
        }],
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y}</b> ' + '({point.percentage:.1f}%)<br/>'
        }
    });
    #container {
        height: 100vh;
        max-height: 500px;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.1.2/highcharts.min.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    
    <div id="container"></div>