How to draw a vertical area chart?

Question

How to draw vertical area in d3? something like I drew in red color:

What is the best approach here? I can't find any examples on the internet.

Answer 1

In fact, as you say, most of examples of area charts (I'd say virtually all of them) use a horizontal area, that is, a version where the baseline is horizontal.

However, it's very easy to create a vertical area chart (that is, with a vertical baseline) using D3. To do so, one has to use the way less known x1 and x0 methods of the area generator .

What happens is that, since almost all examples online are horizontal area charts, you only see x , y1 and y0 as the methods of the area generator. However, the same way x alone sets x0 to the value and x1 to null , y sets y0 to the value and y1 to null .

That being said, you just need to set the vertical baseline with x0 . Check this example:

 const svg = d3.select("svg"); const data = [0, 80, 20, 210, 130, 270, 30, 110, 130, 0]; const areaGenerator = d3.area() .x0(0) .x1(d => d) .y((_, i) => i * 15) .curve(d3.curveMonotoneY) const area = svg.append("path") .attr("d", areaGenerator(data)) .style("fill", "teal");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg></svg>

In short, these are the methods you need:

Horizontal area chart :

• x : position in the baseline
• y1 : distance from baseline
• y0 : baseline

Vertical area chart :

• y : position in the baseline
• x1 : distance from baseline
• x0 : baseline