Highchart - how to control gap between series - highcharts

Question

In Highcharts, how do I control the gaps between categories?
I've highlighted the area I am talking about in blue below:
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.
https://jsfiddle.net/15u0r64s/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
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]
}]
});

Answer 1

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