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.

score 3 · Accepted Answer · answered Oct 16 '15 at 09:36

3

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:

answered Oct 16 '15 at 09:36

Sjoerd

74,049
16
131
175

You can also play with fill-opacity if you don't like the default. – Axel Prieto Dec 21 '15 at 14:27

score 1 · Answer 2 · answered Jul 27 '15 at 14:33

chart.color(["red","yellow","blue"]);

'#00FFFF','#0FF','cyan' all are valid ways to set colors

Another way is set it in data itself

    [{
      values:[{x:1,y:1},{x:2,y:4},{x:3,y:9},{x:4,y:16}],
      key: 'not a Sine Wave',
      color: '#ff7f0e'  //color - optional: choose your own line color.
    }]

duplicate question i guess

score 1 · Answer 3 · answered Mar 31 '16 at 15:29

1

Add

classed: "my-custom-approx-line"

to config of specific line and add styling:

&.nv-area {
  fill-opacity: 0.2;
}

answered Mar 31 '16 at 15:29

StNekroman Sama

61
1
3

score 0 · Answer 4 · answered Jul 20 '16 at 23:29

0

As of commit #becd772

Use .nv-group{ fill-opacity: 1.0 !important; } to fill the area with the same color as the line

answered Jul 20 '16 at 23:29

Ozair Patel

1,658
1
12
17

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

4 Answers4