Question

137

Different Color Bars for Flot Categories Bar Chart

rated 0 times [ 141] [ 4] / answers: 1 / hits: 25376 / 10 Years ago, thu, april 24, 2014, 12:00:00

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]

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ibrahimr

Add To Favorites

Follow

Total Points: 468

Total Questions: 99

Total Answers: 93

Location: Serbia

Member since Sun, Jul 11, 2021

3 Years ago

answered 10 Years ago dylondaytond · Accepted 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"]]

    }

});

enter

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>