Search code examples
javascriptangularjsangular-nvd3

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

Solution

  • 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!