variant assigns color per datum. Use monochrome for four or fewer slices, and categorical for five or more, grouping the remainder into an “Other” slice. Donut charts do not use the semantic palette.
- Design rules: Donut charts
- Shared API / tooltips / palettes: Chart component
Minimal option
A donut is a pie series with an inner radius. ThepadAngle and slice corner radius come from variant.
Variant styling
variant applies the following treatment:
Avoid hand-authoring slice gaps or palette hex values to reproduce this treatment.
Labels inside slices
Direct labels follow the same pattern as bar end labels. The chart theme stylespie.label with a font, a translucent background, and padding, and leaves it at show: false. Enable it with position: "inside".
Use percent of total for part-to-whole, which ECharts writes as {d}%. Raw values through {c} also work. Categorical donut charts require direct labels, because the slice colors do not all reach a 3:1 contrast ratio against each other. Leave renderTooltip unset when the in-slice labels carry enough information. Small slices clip their labels, so group them into an “Other” slice.
Labels outside with a leader line
Outside labels suit charts where in-slice text would clutter or clip. Setposition: "outside" and labelLine: { show: true }. Add the category to the formatter through {b} when the chart has no legend, and leave room in the plot by reducing radius or dropping the side legend so the labels do not collide.
Mixed labels by slice size
The series defaults to inside labels, and slices below a percentage threshold override to outside labels with alabelLine. ECharts merges per-slice label and labelLine values onto the series defaults. The threshold is a product decision: the 20% cutoff in this example is not a design system constant.
Tooltips
PassrenderTooltip for richer hover content. See Chart component.