Simple way to color bar chart

Hi. I’m trying to color a stacked bar chart, and I’ve looked at some other complicated solutions, but I need something simple!

I am trying this which seems to be a hotch-potch of code. I’ve tried the selectAll with about every combination: rect.bar, rect.stack, g.rect.bar etc.

.renderlet(function(chart){
       chart.selectAll("g.rect.stack").attr("fill", function(d){
            if(d.key == "a) Free")   
         return "green-bar";
    else if(d.key == "b) Partly Free")
         return "yellow-bar";
     else if(d.key == "c) Not Free")
         return "red-bar"; 
        });})

Anyone help me get over this?

[nitinsurana]

Here’s the solution for clicking on a bar not dimming the other unselected stackedbars.

chart.selectAll("g rect").style("fill", function (d) {
                        return colorMap[d.layer];
                    });
                    chart.selectAll('g.dc-legend-item rect').style('fill', function (d) {
                        return colorMap[d.name];
                    });
                    chart.selectAll("g rect.deselected").style("fill", function (d) {
                        return '#ccc';
                    });

[NickQiZhu]

The renderlet solution should work however you need to set the fill to color instead of css class:

.renderlet(function(chart){
       chart.selectAll("g.rect.stack").attr("fill", function(d){
            if(d.key == "a) Free")   
         return "green";
    else if(d.key == "b) Partly Free")
         return "yellow";
     else if(d.key == "c) Not Free")
         return "red"; 
        });})

Also make sure remove fill setting in your css class since in some browser the css class take precedence over fill attribute.