Highcharts: series gaps for "columnrange"

Question

I have a columnrange chart with several series. Because each series has a different number of points, it renders not equal gaps between series - see http://jsfiddle.net/czQ9e/

    plotOptions: {
        series: {
            groupPadding: 0
        },
        columnrange: {
            grouping: true,
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return this.y + '°C';
                }
            }
        }
    }

I would like to get equal gaps across all series, even if some groups have "missing" series.

How can I achieve this?

Thanks

Paweł Fus Paweł Fus · Accepted Answer · 2014-07-23T09:26:10

In general, Highcharts will reserve space for each columns, not only existing. You can avoid this by splitting series into two each. See example: http://jsfiddle.net/czQ9e/1/

    series: [{
        name: 'Temperatures',
        id: 'temps',
        color: 'blue',
        data: [
            [-9.7, 9.4],
            [-8.7, 6.5],
            [-3.5, 9.4],
            [-1.4, 19.9],
            [0.0, 22.6],
            [2.9, 29.5]
        ]
    }, {
        name: 'Temperatures',
        linkedTo: 'temps',
        grouping: false,
        color: 'blue',
        data: [
            [6, 9.2, 30.7],
            [7, 7.3, 26.5],
            [8, 4.4, 18.0],
            [9, -3.1, 11.4],
            [10, -5.2, 10.4],
            [11, -13.5, 9.8]
        ]
    }, {
       name: 'Trend',
        data: [
            [-19.7, 3.4],
            [-18.7, 6.5],
            [-3.5, 6.4],
            [-1.4, 9.9],
            [-9.2, 12.4],
            [-3.5, 19.8]
        ]
    }]

Highcharts: series gaps for "columnrange"

1 Answers