Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 334
Dinesh Avatar asked Apr 10 '14 16:04

Dinesh


2 Answers

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.
    }
  ];
like image 155
Karl Avatar answered Nov 08 '22 14:11

Karl


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

like image 21
FernOfTheAndes Avatar answered Nov 08 '22 14:11

FernOfTheAndes