Highcharts fill bar background

Question

Hi guys I have a highcharts graph that is a stacked bar and I am trying to give my chart the effect that it is being filled, almost like a thermometer. Currently when the chart draws the red and gray bars push everything to the right. Is there a way that I can set the gray bar so that it shows right away on page load, and then the red bar fills into the gray bar? Thanks

http://jsfiddle.net/jimbob25/L974T/

 series: [{
        name: 'null',
        data: [5, 69, 86, 75, 48],
        borderRadius: 5,
        color: "gray"
    }, {
        name: 'Values',
        data: [95, 31, 14, 25, 62],
        color: "red",
        borderRadius: 5
    }]

Update, I would like it to look like the first bar in the following link http://jsfiddle.net/L974T/3/

You can see that the first bar is grey, i can make the rest gray and it would be fine, but the bars would not scale based off of resolution

Answer 1

Here is what you can do:

• add one more series, with different stack (as background) - animation for that series should be disabled (duplicated of gray one)
• change color for right-hand series to transparent

And here is working code: http://jsfiddle.net/L974T/4/

    series: [{
        name: 'null',
        data: [5, 69, 86, 75, 48],
        borderWidth: 0,
        color: "rgba(0,0,0,0)"
    }, {
        name: 'null',
        data: [5, 69, 86, 75, 48],
        borderWidth: 0,
        stack: 1,
        animation: false,
        color: "gray"
    }, {
        name: 'Values',
        data: [95, 31, 14, 25, 62],
        color: "red",
        borderWidth: 0,
        borderRadius: 5
    }]