CODEWITHSUNDEEP
highcharts
NicoFC34
NicoFC34

Reputation: 87

Highcharts hide empty bars of categories for multiples series

I'm trying to implement a chart with different series but each series will have a value for different categories independently.

What I want to have:

enter image description here

What I have today:

enter image description here

With the following code:

    document.addEventListener('DOMContentLoaded', function () {
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['a1', 't1', 't2', 'l1', 'l2', 'p1']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
                name: 'a',
            data: [267]
        },{
                name: 't',
            data: [0, 21, 400]
        },{
                name: 'l',
            data: [0, 0, 0, 600, 242]
        },{
                name: 'p',
            data: [0, 0, 0, 0, 0, 1000]
        }],
    });
});

There is free space between bars because series has 0 as values for some category. I just want to have a "nice" chart with all columns one by one. Maybe, it's a different way to configure series and categories...

Upvotes: 1

Views: 782

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

Disable grouping:

plotOptions: {
  series: {
    grouping: false
  }
}

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

API Reference: https://api.highcharts.com/highcharts/plotOptions.column.grouping

Upvotes: 2

Related Questions