path-rite

areaPathStacked

Generate a closed area path between two lines for stacked area charts.

areaPathStacked(topPoints: [number, number][], bottomPoints: [number, number][], curve: CurveConfig): string

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

bottomPoints — Array of [x, y] pairs defining the bottom edge. Must have the same length and matching x-coordinates as topPoints.

curve — Curve interpolation config. Same options as linePath.

Returns — A closed SVG path string. The path traces the top line forward, then the bottom line in reverse, and closes. Empty string if either array has fewer than 2 points.

// Use with stackLayout to build stacked area charts
const series = [[10, 20, 30], [5, 10, 15]];
const stacked = pathRite.stackLayout(series);

// For the second series, top edge is y1, bottom edge is y0
const topPoints = stacked[1].map((d, i) => [i * 50, scaleY(d.y1)]);
const bottomPoints = stacked[1].map((d, i) => [i * 50, scaleY(d.y0)]);
const d = pathRite.areaPathStacked(topPoints, bottomPoints, { type: "MonotoneX" });