Control spacing between bars in Highcharts grouped bar chart

Question

I have two bar charts, drawn using highcharts library, on a single page. I need to maintain same width for bars and same spacing between bars in a group, across these charts. Size of container is different across the charts and fixed as per the UI layout.

Snippet of plot options:

    series: {             
         grouping:true,
         groupPadding:0.12,
         borderWidth: 0,  
         events: {
           legendItemClick: function () {
           return false; 
           }
         }
    }

I have tried various combinations and a jsfiddle link is here - http://jsfiddle.net/U6mhy/29/

In the above link, though the bar width is same between the two charts, spacing between bars in a single group is not same. In fact, bars in chart1 hardly appear to be grouped.

I have tried specifying different values of groupPadding, pointPadding and pointWidth but unable to achieve consistent spacing between bars across these charts.

Please suggest if any other combination of options can help me achieve this.

-Thanks

Answer 1

Just to make it clear, you can use one of (not both):

• pointWidth: forces Highcharts to draw bars with fixed width,
• pointPadding + groupPadding: calculates width of the bar according to these values and chart width/height

Just think about this: how to set the same width of the bar for all charts when you have different number of bars? And the answer is to change charts' width according to number of columns. For example you have 4 bars? Chart height/width will be sum: 4 x 10px + some_padding. If you have 10 bars, when height/width will be: 10 x 10px + some_padding (the same as above). I hope that's what you want to achieve.