How to reduce the space between Bars with a fixed bar width in Highcharts column chart?

Question

I have a column chart with fixed width and fixed bar width. When there is less data the space between the bars is increased. I want to reduce the space, I don't mind if the bars would display from the beginning or in the middle of the chart but the space of the bar should be reduced. A 10px of a space will look good. Any help is much appreciated. Here is a demo -

 Highcharts.chart('container', { chart: { type: 'column', width:1200 }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb' ], crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointWidth:30 } }, series: [{ name: 'Tokyo', data: [49.9, 71.5] }] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Answer 1

Only thing I can think of is adding a bunch of fake columns to eat up the extra space. Highcharts doesn't seem to work like this. According to the docs either pointWidth or pointPadding is used, depending on which one you supply, but not both.

 Highcharts.chart('container', { chart: { type: 'column', width:1200 }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '' ], crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointWidth: 30, }, }, series: [{ name: 'Tokyo', data: [49.9, 71.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>