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

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.
    }
  ];

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