Issue with the color of bar charts d3.js

Question

I'm having some trouble with the color of bar charts.

Jsfiddle's here: http://jsfiddle.net/ZCwrx/574/

In line 111 and line 112, I call the barChart function with different color codes. But in the output, both of the bar charts show up with the first color. I also found that if I take off the lines 83 to 86 , the charts can show up with the right colors but the color of the second bar chart changes to black when I mouse over the bars.

Can anyone help me fix it?

Answer 1

By spec , id is required to be unique on all elements. You are assigning the same id to all your gradients. Quick fix:

var barChart = function(data, chartId, colorOnBar){

  if (!this.timesCalled) this.timesCalled = 0;
  this.timesCalled += 1;

  ...

  var gradient = svg.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "gradient_" + this.timesCalled)

 ...

 .style("fill", "url(#gradient_" + this.timesCalled + ")")

Updated fiddle .