Change dc.js chart colours

Question

Why are all dc.js charts blue in colour? And how do I change it? Went through the dc.css, didn't see much use of the blue colour there!

I tried changing the fill property of quite a few. The only ones I got successful for were the bar charts. Still no clue for the pie charts.

Answer 1

Colors in dc.js (and quite often in d3 in general) are dynamically calculated based on the data, which is why you won't usually find them in the CSS. This takes some getting used to.

In the case of bar charts, the colors are based on the stack number. In pie charts, they are based on the pie slice.

Then they go through a d3 scale in order to assign the actual colors. Typically you want to use chart.ordinalColors to replace the color scale with one with your own colors.

So, e.g. using one of the colorbrewer palettes:

chart.ordinalColors(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628']);

Equivalently, since the colorbrewer palettes are included in D3v4+:

chart.ordinalColors(d3.schemeSet1);

(Lots of wonderful color schemes in d3-scale-chromatic.)

Underneath, ordinalColors is doing this:

chart.colors(d3.scaleOrdinal().range(d3.schemeSet1));

So if you want to control the order of colors you can specify the domain as well:

chart.colors(d3.scaleOrdinal().domain([5,4,3,2,1]).range(d3.schemeSet1));