How do I get my area filled beneath my d3 line chart to be a gradient?

Question

I'm using d3 v4. I would like to create a line chart where the area beneath the graph is an area filled by a gradient going from dark at the top to light at the bottom. I thought this was the way to configure such a gradient

  svg.append("linearGradient")
        .attr("id", "area-gradient")
        .attr("gradientUnits", "userSpaceOnUse")
        .attr("x1", 0).attr("y1", y(0))
        .attr("x2", 0).attr("y2", y(1000))
    .selectAll("stop")
        .data([
            {offset: "0%", color: "navy"},
            {offset: "30%", color: "navy"},
            {offset: "45%", color: "navy"},
            {offset: "55%", color: "navy"},
            {offset: "60%", color: "navy"},
            {offset: "100%", color: "navy"}
        ])
    .enter().append("stop")
        .attr("offset", function(d) { return d.offset; })
        .attr("stop-color", function(d) { return d.color; });

and using this style

.area {                         
    fill: url(#area-gradient);                  
    stroke-width: 0px;          
}

but as you can see from my Fiddle -- https://jsfiddle.net/yw46ycse/3/, what I have instead is a solid area. What else do I need to do to get the area beneath the graph to be a gradient?

Answer 1

Is this the version of the solution your looking for. You can use transparent as the stop-color {offset: "95%", color: "transparent"}.

Here is a modified version of your fiddle that i used to make it as you need it.

https://codepen.io/Nasir_T/pen/OjOWxz

Hope this helps.

Answer 2

a couple of issues to address:

1. You have "navy" for every stop, so the gradient won't show
2. It would be better in this instance to not .attr("gradientUnits", "userSpaceOnUse"). By using the default setting of objectBoundingBox (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/gradientUnits) then you can just use 0,0 0,1 to specify a vertical linear gradient.

For example:

svg.append("linearGradient")
        .attr("id", "area-gradient")
        .attr("x1", 0).attr("y1", 0)
        .attr("x2", 0).attr("y2", 1)
    .selectAll("stop")
        .data([
            {offset: "0%", color: "navy"},
            {offset: "100%", color: "red"}
        ])
    .enter().append("stop")
        .attr("offset", function(d) { return d.offset; })
        .attr("stop-color", function(d) { return d.color; })

Updated fiddle: https://jsfiddle.net/yw46ycse/4/