Sarthak Srivastava Sarthak Srivastava - 1 year ago 129
jQuery Question

Not getting the different color on bar chart pillars

I am writing the code for bar chart using jqplot. When i run the below function :

problem: Only one color is displayed in all three data(the first color)
how do display different color for ticks?

$.jqplot.config.enablePlugins = true;

var d1=${likes[0]};
var d2=${comonelikes[0]};
var d3=${comtwolikes[0]};

var a=[d1,d2,d3];

var ticks = [${myorg},${compOne},${compTwo}];

plot1 = $.jqplot('chart1',[a], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..

animate: !$.jqplot.use_excanvas,

pointLabels: { show: true },

seriesColors :[
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,

tickOptions: { mark: null,
fontSize: 0
 yaxis: {
tickOptions: {formatString: '%d'},

highlighter: { show: true }

function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);

Is there any solution to this?

Answer Source

You need to tell the plot to paint the bars in your colors, using the varyBarColor Renderer Option.

Add it to your seriesDefaults:

    pointLabels: { show: true },
    rendererOptions: {
       // Set varyBarColor to true to use the custom colors on the bars.
         varyBarColor: true

Here is a working jsfiddle example with your code and the additional bar colors.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download