Discrete Bar Chart colors nvd3.js

Question

I am using nvd3.js discrete bar http://nvd3.org/ghpages/discreteBar.html

I am inspecting the code and seen that the color is been derived inline

style="fill: #ffbb78; stroke: #ffbb78;"

I also track on the discreteBarChart function

color = nv.utils.getColor()

What I don't realizing and asking is what does color takes as a parameter ?

shabeer90 · Accepted Answer · 2017-02-03T09:50:44.623

10

It requires and array of colors => ['#aec7e8', '#7b94b5', '#486192'] , something like this would work.

var chart = nv.models.discreteBarChart()
                   .... 
                   ....
                   .color(['#aec7e8', '#7b94b5', '#486192']);

NVD3 inherits the defaults colurs set by d3 here

Hope it helps.

edited Feb 03 '17 at 09:50

answered Jul 18 '13 at 09:01

shabeer90

5,161
4
47
65

3

color() sets the color per dataset while barColor() sets the color per group (with automatic different shading to make the bars distinguishable). They both take arrays of colors. – HostedMetrics.com Apr 12 '15 at 18:37

score 2 · Answer 2 · answered Apr 21 '16 at 10:50

2

If you want to use one single colour, then it can be returned from the options object like below :

var options={
 ....
 colour:function(){
 return '#ff0000';
 },
 ...
 ..
}

answered Apr 21 '16 at 10:50

Optimus

116
1
7

Discrete Bar Chart colors nvd3.js

2 Answers2