Highcharts fill bar background

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

Answers


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
    }]

Need Your Help

Delete Individual Conversations Between Users

php mysql request sql-delete

I have created a private message system for my social media network for my users, which is similar to Facebook.