CODEWITHSUNDEEP
highcharts
Boosted_d16
Boosted_d16

Reputation: 14062

Highchart - how to control gap between series

In Highcharts, how do I control the gaps between categories?

I've highlighted the area I am talking about in blue below: enter image description here

I want to make my highchart chart gaps look like this powerpoint version on the left below. The bars in PowerPoint go all the way to the end of the plot area, but highcharts have this big gap.

enter image description here

https://jsfiddle.net/15u0r64s/

    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
        },
        xAxis: {
            categories: ['Total', 'Male', 'Female', 'Other'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor:
                Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Total',
            data: [10, 20, 31, '']
        }, {
            name: 'Male',
            data: [10, 20, 60, 2]
        }, {
            name: 'Female',
            data: [10, 20, 61, '']
        }, {
            name: 'Other',
            data: [10, 20, 65, 4]
        }]
    });

Upvotes: 1

Views: 197

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You need to edit groupPadding and pointPadding properties:

plotOptions: {
  bar: {
    groupPadding: 0.05,
    pointPadding: 0
  }
}

Live demo: https://jsfiddle.net/BlackLabel/oqpxmL18/

API Reference:

https://api.highcharts.com/highcharts/series.bar.groupPadding

https://api.highcharts.com/highcharts/series.bar.pointPadding

Upvotes: 1

Related Questions