javascript - Change dc.js chart colours - Stack Overflow

admin管理员组

文章数量:1277875

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.

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.

• javascript
• graph
• colors
• dc.js
• crossfilter

Share Improve this question Follow edited Oct 28, 2015 at 15:29 Gordon 20.2k44 gold badges3838 silver badges7777 bronze badges asked Oct 26, 2015 at 11:38 aakashgupta.0205aakashgupta.0205 68711 gold badge1010 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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));

本文标签： javascriptChange dcjs chart coloursStack Overflow