Omar Omar - 4 months ago 95
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();

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

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

Comments