CODEWITHSUNDEEP
dc.js
Nisha
Nisha

Reputation: 199

color of bar in composite chart of dc.js not changing

I have plotted a composite chart using the following code:

compositeChart.width(1200)
    .height(240)
    .margins({top: 10, right: 100, bottom: 70, left:80})
    .transitionDuration(800)
    .dimension(depValue)
    .elasticY(true)
    .filter('(All)')
    .x(d3.scale.ordinal().domain(["AUTO & TIRES","AUTO & TIRES(LY)","BABY","BABY(LY)", "CLOTHING","CLOTHING(LY)" ,"ELECTRONICS","ELECTRONICS(LY)", "GARDEN","GARDEN(LY)", "GROCERY","GROCERY(LY)", "HEALTH","HEALTH(LY)", "HOME","HOME(LY)", "HOME IMPROVEMENT","HOME IMPROVEMENT(LY)", "PHOTO","PHOTO(LY)", "SPORTS","SPORTS(LY)", "TOYS","TOYS(LY)", "VIDEO GAMES","VIDEO GAMES(LY)"]))
    .xUnits(dc.units.ordinal)
    .renderHorizontalGridLines(true)
    .title(function(d) { 
      return d.key + ": " + d3.round(d.value.avgIndex,2); })

     .compose([
            dc.barChart(compositeChart)
                .group(group,"This Year")
                .colors('orange')
                .valueAccessor(function (p) {return p.value.avgIndex;})
                .clickFilterBehavior("replace")
                .barPadding(0.5)
                .brushOn(false)
                .elasticY(true)
                .title(function(d) { 
                return d.key + ": " + d3.round(d.value.avgIndex,2); })
                .filter('(All)')
                .margins({top: 10, right: 100, bottom: 70, left:80})
                .gap(15),

            dc.barChart(compositeChart)
               .colors('grey')
                .group(group1,"Last Year")
                .valueAccessor(function (p) {return p.value.avgIndex;})
                .margins({top: 10, right: 100, bottom: 70, left:80})
                 .barPadding(0.5)
                .gap(15)
                .yAxisLabel($('metric').value+'(TY)')
                .clickFilterBehavior("replace")
                .brushOn(false)
                .title(function(d) { return d.key + ": " + d3.round(d.value.avgIndex,2); })
                .elasticY(true)
               .colors(["#orange"])
              ])
                .yAxisLabel($('metric').value+'(TY)')
                .rightYAxisLabel($('metric').value+'(LY)')
                .renderHorizontalGridLines(true)
                .renderlet(function (chart) {
        chart.selectAll("g._1").attr("transform", "translate(" + 26 + ", 0)");

    });
        compositeChart.renderlet(function(chart){
  chart.selectAll("g.x text")

   .attr('transform', "rotate(30)")
   .style('text-anchor','start')
   .style('font-weight','bold');
});

The issue that I am facing is with .colors('xyz'). In my first bar chart series, the color change reflects but in the other one, no matter which color I put, it is always black.Why is it so??

Upvotes: 1

Views: 464

Answers (1)

Rob Audenaerde
Rob Audenaerde

Reputation: 20039

Because the .colors(["#orange"]) line. You should remove it.

Upvotes: 1

Related Questions