How to fill area with custom color under line in nvd3 linechart ?

Question

I'm working with nvd3 and I'm not much hands-on with its styling (css properties) to customize it. I have a line chart with two data lines on it.
The code for drawing the lines is following:

nv.addGraph(function() {

        chart = nv.models.lineChart();



        chart.margin({

            left : 100,

            bottom : 100

        }).useInteractiveGuideline(true).showLegend(true).duration(250);

        chart.xAxis.axisLabel("Date").tickFormat(function(d) {

            var date = new Date(d);

            return d3.time.format("%b-%e")(date);

        });

        chart.yAxis.axisLabel('').tickFormat(d3.format(',.2f'));



        chart.showXAxis(true);



        d3.select('#startupRiskLineChart').datum(

                prepareDataObj(val1_y, val1_x, val2_y, val1_x))

                .transition().call(chart);

        ;

        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function(e) {

            nv.log('New State:', JSON.stringify(e));

        });

        return chart;

    });

Is there any way to fill the area under data line with a lighter color?
Any help would be highy apperiated.

Answer 1

To get a line chart with a filled area in a specific color:

Add area: true to the data series, as in this example.
Add this CSS: .nv-area { fill: red }

The opacity of the area is set to 0.5, so filling it with red will actually make it pink:

How to fill area with custom color under line in nvd3 linechart ?

Sign up