areaPath

Generate a closed area path from a line down to a horizontal baseline.

areaPath(points: [number, number][], baselineY: number, curve: CurveConfig): string

points — Array of [x, y] coordinate pairs defining the top edge of the area.

baselineY — The y-coordinate of the horizontal baseline. The area fills from the curved line down (or up) to this value.

curve — Curve interpolation config. Same options as linePath (Linear, MonotoneX, Natural, Cardinal, StepBefore, StepAfter).

Returns — A closed SVG path string (ends with Z). The path traces the curve forward, drops vertically to the baseline, returns horizontally, and closes. Empty string if fewer than 2 points.

// Area chart filling down to y=200
const points = [[0, 80], [50, 20], [100, 60], [150, 40]];
const d = pathRite.areaPath(points, 200, { type: "MonotoneX" });
// Use as: <path d={d} fill="steelblue" opacity="0.3" />