Different Color Bars for Flot Categories Bar Chart

Question

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"]
}); 

Knocker

Answer 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 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"]]
    }
});

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"]]
    }
});

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

Knotted

Thank you for the fill: .75. I was using fill: true and only got 50%. After seeing your answer, I understood the real use of fill, where you specify the opacity. – Limon

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

Inter

Answer 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>

<div id="placeholder" style="width:100%; height: 300px"></div>

Optometry