svarog svarog - 1 month ago 40
AngularJS Question

Change line chart area color in Angular-NVD3

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 a thing? is there a way to 'hack' it ?

Answer

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!