javascript - Fix space between columns and align labels on Highcharts

Question

I am creating a column chart but I see too much space between the columns and I want to reduce the space between them. The labels on the xAxis are also not aligning.

This is my fiddle: https://jsfiddle.net/q3atxr4c/1/.

I added pointPadding, borderWidth and groupPadding. None of these are working.

Is there a way for me to reduce space between the columns?

Also all the values show up on my webpage (with navigation working) but are not on the fiddle so thats why I have a large div.

I want to be able to adjust the distance the columns and align the labels on the xAxis for them. Please help!

Answer 1

The pointPadding and groupPadding options won't work as long as the pointWidth is set, which takes precedence. As for the xAxis' labels, they are aligned correctly because they are in the center of all points of a specific category. You can't see them as they have 0 values. You can either remove 0's points or set grouping property to false.

API Reference:
https://api.highcharts.com/highcharts/series.column.pointWidth https://api.highcharts.com/highcharts/series.column.grouping

Examples:
https://jsfiddle.net/BlackLabel/zsnju2xm/ - using pointPadding and groupPadding with all points visible
https://jsfiddle.net/BlackLabel/kzrunfv0/ - using grouping