highcharts - How to set column width for columnRange chart with multiple series -

View:

This hiker has been taken from the sample and shows a column chart with several series is. / P>

Each column is 10 units apart, I want to adjust the width of the column so that they are adjacent, that is, every 10 units wide.

How can I do this?

Set me to group padding <0 so that columns of each series can be properly aligned. I expected that I can set 10 axis units by using the pointrange as follows but it has no effect:

  plotOptions: {columnrange: {groupPadding : 0.5, pointrange: 10, ...   
 Of course I can do this by using the  pointWidth , but for doing so I should know that the axis How to change the pixels from the units:  
  plotOptions: {columnrange: {groupPadding: 0.5, pointWidth: 20, // I see the number of pixels for this 10 axis units  
  UPDATE   
 I have created an updated version of jsFiddle here:  
 < Code> var chart = $ ('# container'). Advanced (option, function) {var width = chart.xAxis [0] .Wide; var max = chart.xAxis [0] .max; var min = chart .xAxis [0] .min; var colWidth = (width + max - min - 1) / (max - min) options.plotOptions.columnrange.pointWidth = colwidth; var chart = $ ('# container'). High Chart (option) .Texture ();}).) High Charch ();   
 In this update, I try an ax, through which I prepare the chart, calculate the desired column width / minimum / maximum generated chart, then Make it again. / P> 
 is not very satisfactory with a demonstration perspective, and it is still not giving me results: I expected that each column should be around 10 axis wide, i.e. they would be more or less adjacent, but this That's not the case, though they are more comprehensive than the first sample.  
  UPDATE 2   
 With the help of Mark's comments, I corrected Kaldiji's solution in this update JSFDL  
 this update Version also supports (vertical) X-axis zooming - this is not useful for sample, but it will be for my target scenario which will create too many columns.  
 There are two problems with this solution:  
 
 
 Performance: The chart is generated twice.   
 
 More importantly, when I zoom the vertical zoom, the column width is not rearranged. In my target scenario, I have a large number of thin columns, and as I zoom, I want them to be large (thick). To achieve this, I would like to specify the column width in axis units (point-range) instead of pixels (point-bids) so that they can automatically resize the shape of the axis.     
 
 
 set  group  and  Pointpadings: , see:   
  plotOptions: {columnrange: {grouping: false, pointPadding: -0.35}},   
 Another option, you can try to use the calculation pointwidth, but then use  series.update ({pointWidth: X})  instead of creating a chart.