sixglazed sixglazed - 3 months ago 68
jQuery Question

Different Color Bars for Flot Categories Bar Chart

How can you have a different color for each bar when using the "categories" mode in Flot?

This code makes every bar the first color in

colors
array. I'd like each bar to be the corresponding color in the
colors
array.

Current code:

var data = [["Red",1],["Yellow",2],["Green",3]];

$.plot("#placeholder1div",[data], {
series: {
bars: {
show: true,
barWidth: 0.3,
align: "center",
lineWidth: 0,
fill:.75
}
},
xaxis: {
mode: "categories",
},
colors: ["#FF0000","#FFFF00","#00FF00"]
});

Answer

As is often my recommendation with Flot, drop the plugin and configure it up youself.

// separate your 3 bars into 3 series, color is a series level option
var data = [{data: [[0,1]], color: "red"}, 
            {data: [[1,2]], color: "yellow"},
            {data: [[2,3]], color: "green"}];

$.plot("#placeholder",data, {
    series: {
        bars: {
            show: true,
            barWidth: 0.3,
            align: "center",
            lineWidth: 0,
            fill:.75
        }
    },
    xaxis: {
        // drop the categories plugin and label the ticks yourself
        // you'll thank me in the long run
        ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]]
    }
});

Produces (fiddle here):

enter image description here