Question

Let’s say I have a path in Raphael drawn by a string:

M 163 420 R 163 360 188 330 213 210 238 270 263 30 288 60 313 90 338 180 363 330 388 420

It would produce a result like this:

How can I use Raphael to fill in the area underneath the path with a color, like an area chart? Since I know the starting and ending points on the bottom edge, I could continue the path and make it a closed loop by adding “L 163 420” to draw a straight line from the lower right to the lower left.

I can’t find anything in the documentation about creating areas to fill using paths, but surely this must be possible, right?

Answer 1

Use the fill attribute. You also don’t need to close the path, Raphael can figure it out.

paper.path("M 163 420 R 163 360 188 330 213 210 238 270 263 30 288 60 313 90 338 180 363 330 388 420")
     .attr("fill", "red");