linePath

Generate an SVG path string for a line through points with curve interpolation.

linePath(points: [number, number][], curve: CurveConfig): string

points — Array of [x, y] coordinate pairs defining the line.

curve — Curve interpolation config. An object with a type field and optional parameters:

• { type: "Linear" } — Straight line segments between points.
• { type: "MonotoneX" } — Monotone cubic interpolation preserving monotonicity in x. Prevents artificial extrema in the curve.
• { type: "Natural" } — Natural cubic spline with second derivative equal to zero at endpoints.
• { type: "Cardinal", tension: number } — Cardinal spline. Tension ranges from 0.0 (Catmull-Rom, loosest) to 1.0 (linear, tightest).
• { type: "StepBefore" } — Step function: vertical then horizontal.
• { type: "StepAfter" } — Step function: horizontal then vertical.

Returns — An open SVG path string (no Z command). Empty string if points is empty.

// Simple line chart
const points = [[0, 80], [50, 20], [100, 60], [150, 10]];
const d = pathRite.linePath(points, { type: "MonotoneX" });
// Use as: <path d={d} fill="none" stroke="currentColor" />

// Cardinal spline with moderate tension
const smooth = pathRite.linePath(points, { type: "Cardinal", tension: 0.5 });

// Stepped line for discrete data
const stepped = pathRite.linePath(points, { type: "StepAfter" });