nvd3.js - unable to change color of line in line chart

Question

I am trying to change the colors of different lines of the nvd3 line chart here but am unable to understand how to do so. I would like to change the colors of the 2 lines in the example to green and cyan. I tried

nv.addGraph(function() {
   var chart = nv.models.lineChart()
      .useInteractiveGuideline(true)
      .color(["rgb(0,255,0)","rgb(255,165,0)"]);
}

It worked for scatter chart here. But the color does not change for line chart. Any suggestions.

Thanks

Adumbrate

It doesn't work in this case because the color for the lines is specified in the data. – Analphabetic

Answer 1

You can use this!

return [
    {
      values: data,      //values - represents the array of {x,y} data points
      key: 'Money', //key  - the name of the series.
      color: '#33ccff'  //color - optional: choose your own line color.
    }
  ];

Unipolar

Answer 2

In your CSS:

.nv-group.nv-series-0 {
    stroke-opacity: 1; 
    fill-opacity: 0.5; 
    fill: red; 
    stroke: red;
}

This will change the color for the first line to red, for example. Use .nv-group.nv-series-1 for second line, and so on...

Washery

Are there custom colors based on rgb values defined too? – Adumbrate

You pretty much can define any color you want, say, fill: rgb(0,255,0) or stroke: rgb(0,255,0) for green, etc. – Washery

Didn't work for me without adding !importants. Also, it (obviously) doesn't change the colour of related components, e.g. the legend. – Byerly