D3 Append Simple Area

I want to append simple area to my chart with end points of area values as constants. percentArea = d3.svg.area() .interpolate('linear') .x0(0) .x1(w) .y0(h

Solution 1:

You need to ensure that the path you have rendered is being filled. There are two ways you can do this:

Set a Style

path.style("fill", "steelblue");

Set a class and leverage CSS

path.attr("class", "filled-area");

// In CSS
.filled-area {
    fill: steelblue;
}

Here's a quick example:

Area Chart with a Stroke:

Area Chart with no fill

As you can see this defaults to black

Area Chart with correct fill