-2

I have to make an area chart using only HTML, SVG and CSS; I know how to make a line chart, but I don't know how to fill the area below the lines.

I know that using d3 (or other JS libraries) is the correct way, but for now I have to avoid JS (it's a university "homework").

The structure of the chart is: on the horizontal axis I have incremental values (0, 1, 2, ...) and on the vertical axis I have my values.

StormPooper
  • 493
  • 1
  • 6
  • 11

1 Answers1

1

This is a good exercise for learning how to create the path object in JS. The path object is walking from point to point in the 'd' attribute.

Check out the w3 schools page - https://www.w3schools.com/graphics/svg_path.asp And this stackoverflow answer - Scripting <path> data in SVG (reading and modifying)

The fill under requires that you continue the path all the way to the the axes so that you form a complete shape. Try some of the examples online to get a feel for it.

Edith Hamilton
  • 11
  • 1