Chart.Donut

A pie with the middle cut out, leaving room for a total.

Chart of Freelancers over 4 points
disciplineFreelancers
design86
development54
writing37
consulting21
<Chart.Donut />

API

PropTypeDefault
dataKeystringField holding each wedge's size. Defaults to the first value key.
endAnglenumberWhere the last wedge ends. A partial sweep draws an arc rather than a circle.
innerRadiusRationumber0.6Fraction of the outer radius left hollow. 0 draws a full pie.
insetnumberPixels kept clear around the wedges, for the active one to lift into.
nameKeystringField naming each wedge's config entry. Defaults to the category field.
padAnglenumberRadians of blank between two wedges.
startAnglenumberWhere the first wedge begins, in radians clockwise from 12 o'clock.

Plus the DOM props of the element it renders. Source: chart/components/chart-donut.tsx.

The same props as Chart.Pie — a donut is a pie with innerRadiusRatio above zero. The hole is worth it for two reasons: a total can sit in it, and comparing arc lengths is easier than comparing wedge areas.