css - How to fill area with custom color under line in nvd3 linechart ? -
i'm working nvd3 , i'm not hands-on styling (css properties) customize it. have line chart 2 data lines on it. code drawing lines 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 way fill area under data line lighter color? highy apperiated.
to line chart filled area in specific color:
- add
area: true
data series, in this example. - add css:
.nv-area { fill: red }
the opacity of area set 0.5, filling red make pink:
Comments
Post a Comment