How to give solid colors to bar charts in flot

Coder_sLaY picture Coder_sLaY · Feb 16, 2012 · Viewed 16.2k times · Source

I need to give solid colors to bar charts... I have followed this link Bar chart Example

But i want to give solid colors and also i need to change colors myself... how to do it...

Answer

Ryley picture Ryley · Feb 16, 2012

First off, read the API.txt, it answers all your questions. Two things you need to do then. When you specify that you want bars, set fill: 1, which tells flot to make the colors 100% opaque. To specify a colour per series, just add a color:'red' to each data object.

So you end up with a data object like this:

var data = [
    {label: 'foo', color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
    {label: 'bar', color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
    {label: 'baz', color:'yellow', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
];

And flot options like this:

{
    series: {
        stack: 1,
        bars: {
            show: true,
            barWidth: 0.6,
            fill:1
        }
    }
}

See it in action here: http://jsfiddle.net/ryleyb/kKdxt/