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 cor

Solution 1:

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 optionvardata = [{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"]]
    }
});

Running code:

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: {
        ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]]
    }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script><divid="placeholder"style="width:400px; height: 300px"></div>

Solution 2:

When you put your data you must to put the colors inside:

var data = [
    {color: '#ff00aa', data: [[0, 1]]},
    {color: 'red', data: [[1, 1]]},
    {color: 'yellow', data: [[2, 2],[3, 2]]},
    {color: 'orange', data: [[4, 2]]},
    {color: 'blue', data: [[5, 4],[6, 7]]},
    {color: '#000000', data: [[7, 1]]}
];

Solution 3:

Use below configuration

// Colors var color01 = '#00cde2';
var color02 = '#ffb700';
var color03 = '#7ac70c';
var color04 = '#313541';
var color05 = '#fc3232';
var color06 = '#1cb0f6';
var color07 = '#00c07f';

var data = [
            {data: [[0, 4.1]], color: color01},
            {data: [[1, 1.8]], color: color02},
            {data: [[2, 2]], color: color03},
            {data: [[3, 4.5]], color: color04},
            {data: [[4, 3.7]], color: color05},
            {data: [[5, 5.6]], color: color06},
            {data: [[6, 2.6]], color: color07}
        ];

        $.plot($("#placeholder"), data, {
            series: {
                lines: {
                    fill: false
                },
                points: {show: false},
                bars: {
                    show: true,
                    align: 'center',
                    barWidth: 0.5,
                    fill: 1,
                    lineWidth: 1
                }
            },
            xaxis: {
                tickLength: 0,
                ticks: [
                    [0, "Data One"],
                    [1, "Data Two"],
                    [2, "Data Three"],
                    [3, "Data Four"],
                    [4, "Data Five"],
                    [5, "Data Six"],
                    [6, "Data Seven"]]
            },
            yaxis: {
                min: 0
            },
            grid: {
                hoverable: true,
                backgroundColor: {
                    colors: ["#fff", "#fff"]
                },
                borderWidth: {
                    top: 1,
                    right: 1,
                    bottom: 2,
                    left: 2
                },
                borderColor: {
                    top: "#e5e5e5", 
                    right: "#e5e5e5",
                    bottom: "#a5b2c0",
                    left: "#a5b2c0"
                }
            }
        });

@import'https://fonts.googleapis.com/css?family=Open+Sans';
#placeholder{
    font-family: 'Open Sans', sans-serif;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="http://www.flotcharts.org/flot/jquery.flot.js"></script><divid="placeholder"style="width:100%; height: 300px"></div>