High Charts - Split color of bar chart

Question

I have a High Chart chart similar to this bar chart: http://jsfiddle.net/s4zzpLzL/

How would I got about spliting the bar colors so that the color of the bar up until 500 is grey and the color of the bar after is the color you see on the screen? See image below.

Answer 1

You can use zones in each serie like this:

zones: [{
        value: 500,
        color: '#A0A0A0'
}]

value is the up until value, and color is the color of that zone. Here's your edited FIDDLE

EDIT:

You can also use plotBands but it's not exactly what you would want: DEMO

There is also a plugin which I don't think covers exactly what you are asking: Plugin

Other than these I don't think there is another way unless you alter your data and use stacked bar chart. You will have to change all of your data though and it will be tiresome.

Answer 2

You can set gradient color for series, demo: http://jsfiddle.net/pscwnzk7/1/

$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    series: [{
        color: {
            linearGradient: [0, 0, 0, 500],
            stops: [
                [0, '#ff0ff0'],
                [0.5, '#ff0ff0'],
                [0.5, '#f0f00f']
            ]
        },
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]
});

The only problem with that solution is that you can't specify (in values) where will be break - try to resize chart. So you would need to update series color gradient on each window resize etc.

Answer 3

You can use concept of grouping, threshold and negativeColor to achieve this. Create 2 series with the same data and overlap them with grouping: false and a negativeColor: 'transparent'

demo: https://jsfiddle.net/1dp8L1gw/

plotOptions: {
    bar: {
        grouping: false,
        borderWidth: 0
    }
},
series: [{
    name: 'Tokyo',
    data: [45.9, 71.5, 106.4],
    color: 'red'
}, {
    name: 'Tokyo',
    data: [45.9, 71.5, 106.4],
    color: 'blue',
    threshold: 50,
    negativeColor: 'transparent'
}]