Discrete Bar Chart colors nvd3.js

7
votes

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 ?

2
nvd3.js

2 Answers

10
votes

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.

2
votes

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';
 },
 ...
 ..
}