Omar Omar - 1 year ago 170
CSS Question

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

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();

left : 100,
bottom : 100
chart.xAxis.axisLabel("Date").tickFormat(function(d) {
var date = new Date(d);
return d3.time.format("%b-%e")(date);

prepareDataObj(val1_y, val1_x, val2_y, val1_x))
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 Source

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:

Graph with pink area under the line