CODEWITHSUNDEEP
javascriptd3.jsdc.jscolorbrewer
amcdnl
amcdnl

Reputation: 8638

D3 ColorBrewer Coloring on Dynamic Scales

I'm using dc.js which sits on top of D3. Problem is all my charts have the same color bars like:

enter image description here

Its not easy to set the domain for different colors because none of my charts are static and the values on x/y axis could always be different. How could I just tell the chart to dynamically change the colors for each group? The example above code looks like:

 var chart = dc.barChart(elm);
 chart.barPadding(0.1)
 chart.outerPadding(0.05)
 chart.brushOn(false)
 chart.x(d3.scale.ordinal());
 chart.xUnits(dc.units.ordinal);
 chart.elasticY(true);
 chart.width(250).height(250)
 chart.render();

I've tried adding something like:

 chart.range(colorbrewer.RdBu[9]);

but then all the charts turn the same color too.

Thanks!

Upvotes: 0

Views: 3984

Answers (1)

Patrick Berkeley
Patrick Berkeley

Reputation: 2286

I believe you want something like:

chart.colors(d3.scale.category20b());

to assign a color to each bar. If you want the color that's selected to be based of the value of the bar's data:

chart.colorAccessor(function(d, i){return i;})

These methods and more are documented here: https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#color-mixin

Upvotes: 3

Related Questions