How to set column width for columnRange chart with multiple series

Question

This is derived from a HighCharts sample and shows a columnrange chart with multiple series.

Each column is 10 units apart. I want to adjust the column widths so that they are contiguous, i.e. that each are 10 units wide.

How can I do this?

I have groupPadding set to 0 so that the columns for each series are aligned properly. I hoped I could set the width to 10 axis units using pointRange as follows, but this has no effect:

    plotOptions: {
        columnrange: {
            groupPadding: 0.5,
            pointRange: 10,
            ...

Of course I can do it using pointWidth, but to do so I need to know how to convert from axis units to pixels:

    plotOptions: {
        columnrange: {
            groupPadding: 0.5,
            pointWidth: 20, // I want this to be the number of pixels for 10 axis units
            ...

UPDATE

I've created an updated version of the jsFiddle here: http://jsfiddle.net/rv6Wt/6/

var chart = $('#container').highcharts(options, function(chart) {
        var width = chart.xAxis[0].width;
        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').highcharts(options).highcharts();
}).highcharts();

In this update I attempt a kludge, whereby I generate the chart once, calculate the desired column width based on the width/min/max of the generated chart, then generate it again.

Not very satisfactory from a performance perspective, and it still doesn't give the result I want: I expected each column would be approx 10 axis units wide, i.e. they would be more or less contiguous, but this isn't the case, although they are wider than the first sample.

UPDATE 2

With the help of Mark's comments, I've corrected the kludgey solution in this updated jsFiddle http://jsfiddle.net/rv6Wt/10/

This updated version also supports zooming of the (vertical) x-axis - not useful for this sample, but it will be for my target scenario which will have many more columns.

The two problems with this solution are:

Performance: the chart is generated twice.
More importantly, the column widths are not readjusted when I zoom vertically. In my target scenario, I will have a large number of thin columns, and as I zoom I want them to scale (become thicker). To achieve this, I'd ideally like to specify the column width in axis units (pointRange) rather than pixels (pointWidth) so that they automatically resize as the axis is zoomed.

Are you trying to get it to look like this: jsfiddle.net/rv6Wt/8? — Mark
@Mark: yes, that's what I'm looking for, thanks for the correction. But what I really want to do is to specify the column width in axis units. I may have a large number of columns, in which case they will be thin, but should get thicker as I zoom in (I will be setting zoomType: 'x'). — Joe
Thinking about it, what you really want is "normal" stacking with pointPadding set to 0. Alas, the columnrange chart type errors with the stacking option! — Mark
@Mark, I've also tried experimenting with calling setting chart.xAxis[0].options.columnrange.pointWidth to the desired width then calling chart.redraw instead of reloading the chart, but this doesn't seem to work. — Joe

Paweł Fus Paweł Fus · Accepted Answer · 2013-06-24T11:58:35

Set grouping and pointPadding, see: http://jsfiddle.net/rv6Wt/11/

For example:

    plotOptions: {
        columnrange: {
            grouping: false,
            pointPadding: -0.35
        }
    },

Another option, you can try to use calculated pointWidth, but then use series.update({ pointWidth: X}) instead of recreating chart.

How to set column width for columnRange chart with multiple series

1 Answers