Draw a Pie Chart Slice with SVG Path Arc Commands

Pie Chart Slice with Arc Commands

A pie chart slice is a sector of a circle, drawn with a combination of M (move), L (line), and A (arc) commands.

The Formula

For a slice from angle startAngle to endAngle (in radians) with radius r centered at (cx, cy):

startX = cx + r * cos(startAngle)
startY = cy + r * sin(startAngle)
endX   = cx + r * cos(endAngle)
endY   = cy + r * sin(endAngle)
largeArcFlag = (endAngle - startAngle > PI) ? 1 : 0

Path Template

M cx,cy L startX,startY A r,r 0 largeArcFlag,1 endX,endY Z

Example: 25% Slice (90 degrees)

For a circle centered at (50, 50) with radius 40, slice from 0 to 90 degrees:

M 50,50 L 90,50 A 40,40 0 0,1 50,90 Z

Command	Description
M 50,50	Move to the center
L 90,50	Line to the arc start (right, 0 degrees)
A 40,40 0 0,1 50,90	Arc to the arc end (bottom, 90 degrees)
Z	Close back to center

Handling 50%+ Slices

When the slice spans more than 180 degrees, set large-arc-flag to 1:

# 75% slice (270 degrees):
M 50,50 L 90,50 A 40,40 0 1,1 50,10 Z

Donut Chart Variation

For a donut slice, add an inner arc:

M outerStartX,outerStartY
A outerR,outerR 0 largeArc,1 outerEndX,outerEndY
L innerEndX,innerEndY
A innerR,innerR 0 largeArc,0 innerStartX,innerStartY Z

Note the reversed sweep flag for the inner arc.