path-rite

arcPath

Generate an arc or annular sector SVG path for pie slices and donut segments.

arcPath(cx: number, cy: number, innerR: number, outerR: number, startAngle: number, endAngle: number): string

cx — X-coordinate of the arc center.

cy — Y-coordinate of the arc center.

innerR — Inner radius. Use 0 for a pie slice, or a positive value for a donut segment.

outerR — Outer radius.

startAngle — Start angle in radians. 0 points up (12 o'clock), increasing clockwise.

endAngle — End angle in radians. The arc sweeps from startAngle to endAngle.

Returns — A closed SVG path string. For pie slices (innerR = 0), the path arcs from start to end and lines back to center. For donut segments, it traces the outer arc forward and inner arc in reverse.

// Pie slice: quarter circle from 12 o'clock to 3 o'clock
const slice = pathRite.arcPath(100, 100, 0, 80, 0, Math.PI / 2);

// Donut segment
const segment = pathRite.arcPath(100, 100, 40, 80, 0, Math.PI / 2);

// Use with pieLayout for a full pie chart
const slices = pathRite.pieLayout([30, 20, 50]);
const paths = slices.map(s =>
  pathRite.arcPath(100, 100, 0, 80, s.startAngle, s.endAngle)
);