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 ?

Alger

Answer 1

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.

Extrasystole

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. – Sypher

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

Expunge