Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to i set jqplot bar chart colours per bar?

Tags:

colors

jqplot

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?

like image 530
Brian Scott Avatar asked Nov 10 '10 12:11

Brian Scott


People also ask

How do I make bars different colors on a bar graph in Excel?

On the Format tab, in the Current Selection group, click Format Selection. tab, expand Fill, and then do one of the following: To vary the colors of data markers in a single-series chart, select the Vary colors by point check box.

How do I add color to my bar?

Re: How to se color in vbar sgplot lineattrs=(pattern=solid); xaxis display=(nolabel); run; proc sgplot data=&_input.; styleattrs datacolors=(blue red) ; title "Mean &response. per &class. "; vbar &class. / group=&class. response=&response.


1 Answers

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 (£)',
              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.

like image 108
Matthew Fedak Avatar answered Sep 19 '22 13:09

Matthew Fedak