Chart Shape

Headless, dependency-free, d3-compatible SVG path generators and chart layouts.

API

arcPath

Generate the SVG path of a circular or annular sector centered at the origin.

function arcPath(geometry: ArcGeometry, digits: number | null = 3): string

arcPath({ innerRadius: 40, outerRadius: 80, startAngle: 0, endAngle: Math.PI / 2 });

arcCentroid

Midpoint of an arc, useful for labels and tooltips.

function arcCentroid(geometry: ArcGeometry): [number, number]

pieLayout

Compute pie or donut slice angles. Slices are returned in input order.

function pieLayout<T>(data: readonly T[], options: PieOptions<T>): PieSlice<T>[]

barRects

Compute bar rectangles. Negative values grow away from the baseline in the opposite direction, and widths and heights are always non-negative so the result can be bound directly to SVG <rect> attributes.

function barRects<T, Category>( data: readonly T[], options: BarOptions<T, Category>, ): BarRect<T>[]

roundedRectPath

SVG path for a rectangle with independently rounded corners, clamped so opposite radii never overlap.

function roundedRectPath( rect: Pick<BarRect<unknown>, "height" | "width" | "x" | "y">, radius: number | BarCornerRadius, digits: number | null = 3, ): string

curveLinear

Straight segments between points.

const curveLinear: CurveFactory

curveMonotoneX

Cubic curve that preserves monotonicity in y for x-sorted data.

const curveMonotoneX: CurveFactory

curveStep

Horizontal-then-vertical steps centered between points.

const curveStep: CurveFactory

curveStepBefore

Vertical step at the start of each segment.

const curveStepBefore: CurveFactory

curveStepAfter

Vertical step at the end of each segment.

const curveStepAfter: CurveFactory

curveCatmullRom

Catmull–Rom spline through every point. alpha 0.5 (centripetal, the default) avoids cusps and self-intersections; 0 is uniform, 1 chordal.

function curveCatmullRom(alpha = 0.5): CurveFactory

resolveCurve

Resolve a curve name or factory.

function resolveCurve(curve: CurveName | CurveFactory | undefined): CurveFactory

d3ShapeVectors

const d3ShapeVectors

linePath

Generate an SVG path for a line through data, or null when nothing is drawn.

function linePath<T>(data: readonly T[], options: LineOptions<T>): string | null

linePath(points, { x: (d) => xScale(d.date), y: (d) => yScale(d.value), curve: "monotoneX" });

areaPath

Generate an SVG path for an area between a baseline and a topline.

function areaPath<T>(data: readonly T[], options: AreaOptions<T>): string | null

createPath

Create an SVG path builder. digits rounds coordinates (d3-shape uses 3); null keeps full precision.

function createPath(digits: number | null = 3): PathBuilder

stackLayout

Stack series for stacked bar and area charts. Series are returned in keys order; series.index holds the stacking position.

function stackLayout<T, Key extends string>( data: readonly T[], options: StackOptions<T, Key>, ): StackSeries<T, Key>[]

const series = stackLayout(rows, { keys: ["apples", "pears"], value: (row, key) => row[key] });

Behavior

Normative input -> outcome table for @vizejs/ui/chart-shape: line and area paths with linear, monotoneX, step, and Catmull–Rom curves, arcs (pie, donut, padded, rounded), pie and stack layouts, and bar geometry. Every row is proven by the named test in chart-shape.test.ts or chart-shape-ssr.test.ts; compile-only guarantees live in chart-shape.types.test-d.ts.

The generators are ports of d3-shape 3 and d3-path 3 (ISC licensed) and emit byte-identical d strings, including d3-shape's default 3-digit rounding. The fixed reference vectors live in shape-d3-vectors.ts; there is no runtime or test dependency on d3.