How to i set jqplot bar chart colours per bar?

Question

I'm trying to set the colours of my jqplot bar chart bars. There will always be six bars present, grouped into sets of 2 bars. Here is an example of the data being plotted:

 line1 = [6000, 5000, 5500];
 line2 = [16000, 10000, 14000];

I've used the following so far:

 seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501", "#027997", "#CF3501", "#027997"],

But jqplot alternates between the first 2 bars each time instead of using all of the declared colours. This is probably as it only determines 2 series being present, one per set of data.

Is there a way to set the bar colours explicitly?

score 31 · Accepted Answer · answered Jan 02 '11 at 12:18

I do this using the varyBarColor method so you can list the different colours for the bars in a simple array like you have done already but if there is only one series it will use these colors for each bar instead. Here is an example of my code:

plot1 = $.jqplot('chart1', [s1], {
        title: 'Example Income Graph',
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions:{ varyBarColor : true },
            pointLabels: { show : true }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                label:'Net Growth (%)',
                ticks: ticks
            },
            yaxis:{
              label:'Income (&pound;)',
              tickOptions:{ formatString:'%d'},
              autoscale:true,
              min:0, 
              max:10000
            }
        },
        seriesColors: [ "#eee", "#ccc", "#999"],
        highlighter: { show: false }
    });

In this graph I had one series with 3 bars and they are each a different colour grey.

this answer doesnt really explain how to achieve what the TO asked for. His question was about multiple series and manually specifying each single bar's colors — beercan, Apr 11 '13 at 12:33

score 4 · Answer 2 · answered Apr 17 '14 at 18:01

This is pretty old, but still doesn't have the right answer, and it took me a while to figure it out, so here it goes.

You need two things: Set the varyBarColor and a series array that contains the series colors for each series, passed at the same level as seriesDefaults, such as:

plot1 = $.jqplot('chart1', [s1, s2], {
            title: 'Example',
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                rendererOptions:{ varyBarColor : true },
                pointLabels: { show : true }
            },
            series: [{seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501"]},
                     {seriesColors: ["#027997", "#CF3501", "#027997"]}]
            }

score -1 · Answer 3 · edited May 27 '14 at 13:16

-1

try like this

series:[{renderer:$.jqplot.BarRenderer , seriesColors: ["#F3CBBF", "#BFDDE5", #CF3501","#eee", "#ccc", "#999"] }]

edited May 27 '14 at 13:16

Mike Gardner

6,611
5
24
34

answered May 27 '14 at 12:54

Jyothi Desam

1

How to i set jqplot bar chart colours per bar?

3 Answers3

Linked

Related