5

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

Community
  • 1
  • 1
Dinesh
  • 2,194
  • 3
  • 30
  • 52

2 Answers2

6

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.
    }
  ];
Karl
  • 329
  • 6
  • 20
4

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

FernOfTheAndes
  • 4,975
  • 2
  • 17
  • 25
  • Are there custom colors based on rgb values defined too? – Dinesh Apr 10 '14 at 17:51
  • You pretty much can define any color you want, say, `fill: rgb(0,255,0)` or `stroke: rgb(0,255,0)` for green, etc. – FernOfTheAndes Apr 10 '14 at 17:58
  • 1
    Didn't work for me without adding `!important`s. Also, it (obviously) doesn't change the colour of related components, e.g. the legend. – c24w Jun 20 '16 at 10:58