2

I'm using the Angular-NVD3 library to show some line charts, I've seen that I can set an "area" property to 'true' in the data so that the area of the graph will be colored. 

{
    values: [/** some data **/],
    key: 'Cosine Wave',
    color: '#2ca02c',
    area: true
}

live example

but I cannot find how to change the color of the area. by default the chart colors the area to a lighter hue of the line color, but I need it as a light gray.

Does the API ($scope.options) even allow for such an option? is there a way to 'hack' it ?

svarog
  • 9,477
  • 4
  • 61
  • 77
  • Did you ever get to the bottom of this?!?! – iggymoran Dec 16 '15 at 13:22
  • well.. technically d3 is svg and svg is a part of the DOM, I've tried using css to select the area and maybe somehow manipulate it, but couldn't get it right, but it is possible. I think it's a prime candidate for a feature request. – svarog Dec 16 '15 at 18:26
  • @iggymoran check out the posted solution – svarog Dec 26 '15 at 17:48

1 Answers1

3

I opened an issue in github and got a response from the author, he advised changing the area's css rules and provided this snippet 

.nvd3 .nv-group.nv-series-0 {
     fill: lightgray!important; /* color for area */
}

(0 being the line index).

I tested it in a plunk and it works as needed!

svarog
  • 9,477
  • 4
  • 61
  • 77