HighCharts stacked column range

Question

I'm having a problem getting Highcharts Column Range charts with multiple data series to display as I would like. Please refer to http://jsfiddle.net/jbreadner/6qsvjark/1/

There are two charts shown here, the "Top Chart" and "Bottom Chart".

The top chart uses multiple data series effectively, as seen both in code and also with the "Task 1" and "Task 2" entries in the legend. The problem with this chart is that the Task 1 and Task 2 bars are offset from each other vertically.

    series: [{
        name: 'Task 1',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: 7,
            high: 8
        }, {
            x: 1,
            low: 6.5,
            high: 7.5
        }]
    }, {
        name: 'Task 2',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: 8,
            high: 9
        }, {
            x: 1,
            low: 7.5,
            high: 8.5
        }]
    }]

The bottom chart displays the column range chart as I would like to see, but it forces a color for every data point, and in using one data series it breaks the legend functionality. This results in uglier code with reduced functionality.

    series: [{
        name: 'Data',
        data: [{
            x: 0,
            low: 7,
            high: 8
        },{
            x: 0,
            low: 8,
            high: 9,
            color: "#202020"
        },{
            x: 1,
            low: 6.5,
            high: 7.5
        },{ 
            x: 1,
            low: 7.5,
            high: 8.5,
            color: "#202020"
        }]
    }]

Is there any way to modify the top chart's configuration so it retains multiple data sets, but visually looks like the bottom chart?

Column charts have a "stack" property, but this doesn't appear to work with the chart range type. The "stack" option is included in the top chart.

Sorry to tell u that, but they are not really stucked. let say we've two Columns, C1(x, low1, high1) and C2(x, low2, high2) if (low2 < low1 and high2 > high1 ) you'll see C2 hidding totally C1.. The principle of Stucking is to put C2 totally on top of C1, which is not the case in here.. — user8005270

Raein Hashemi Raein Hashemi · Accepted Answer · 2014-10-28T08:26:24

just add :

plotOptions: {
        columnrange: {
            grouping: false
        }
    }

to your chart. http://jsfiddle.net/6qsvjark/2/

HighCharts stacked column range

1 Answers