D3.js shade area between two lines using CSS fill

Asked Jul 28 '16 at 07:38

Active Jul 28 '16 at 12:33

Viewed 120 times

Pretty new to D3.js, I am able to achieve area below top line and area below bottom line, and have shaded these using fill.

Now i want to keep area below bottom line as transparent but area in between as shaded. How can i do so?

.areaBelow {
  fill: green;
  stroke-width: 0;
}

.areaAbove {
  fill: lightsteelblue;
  stroke-width: 0;
}

edited Jul 28 '16 at 12:33

Mark

asked Jul 28 '16 at 07:38

Rahi

See this question: http://stackoverflow.com/questions/25901271/using-d3-to-shade-area-between-two-lines – Mark Jul 28 '16 at 12:31
@Mark That's a different implementation all together, I will have to change complete graph to achieve that, can I somehow achieve what I want using CSS? – Rahi Jul 31 '16 at 19:12
I don't know a way with pure `CSS` but the changes are pretty easy. I updated your [fiddle here](http://jsfiddle.net/10ueyt8n/1/). – Mark Jul 31 '16 at 20:59

0 Answers0