Create Donut chart

Everything you need to know to create the chart you want.

Overview

Donut charts are pie charts with a hollow centre, giving you space for a headline metric. They retain the part-to-whole message while offering more flexibility for annotations.

When to use it

• Displaying composition with a key total or KPI in the middle.

• Comparing a maximum of 5–6 segments.

• Creating compact dashboard tiles with a central callout.

Avoid donut charts when you need precise comparisons between slices or when the total isn’t meaningful.

Data requirements

• Single series of positive values.

• Categories represent distinct slices.

• Total should ideally equal 100% for intuitive interpretation.

Style options available

Group	Control	Input type	Options	Description
Colors	Color palette	palette	—	Palette applied to series; sets the default colours for the chart.
General → Donut	Inner size, %	text	—	Inner radius for donut or gauge charts as a percentage of the outer radius.
General → Donut	Start angle, deg	number	—	Angle where circular charts begin drawing, in degrees.
General → Donut	End angle, deg	number	—	Angle at which circular charts (pie, donut, gauge) stop drawing, measured in degrees.
General → Donut	Margin between slices	number	—	Gap between adjacent pie or donut slices.
General → Donut	Enable sorting	boolean	—	Automatically sorts points by value before plotting.
General → Data labels	Show data labels	boolean	—	Shows numeric labels directly on data points.
General → Data labels	Allow labels to overlap	boolean	—	Allows labels to render even if they collide instead of hiding them automatically.
General → Data labels	Font name	text	—	Font family used for titles, labels, or legend text.
General → Data labels	Font style	text	—	Font weight or style (e.g., bold, italic).
General → Data labels	Font size	number	—	Font size in pixels for the selected text element.
General → Data labels	Font color	color	—	Colour of the text shown for this element.
Legend → Main	Show legend	boolean	—	Shows or hides the legend box.
Legend → Main	Horizontal align	select	left, center, right	Horizontal alignment for the legend box (left, centre, right).
Legend → Main	Vertical align	select	top, middle, bottom	Vertical alignment for the legend box (top, middle, bottom).
Legend → Main	Layout	select	horizontal, vertical, proximate	Orientation of the legend items (horizontal row, vertical column, or proximate).
Legend → Additional	Margin for legend	number	—	Outer margin around the legend box.
Legend → Additional	Margin top for items	number	—	Top padding inside the legend between items.
Legend → Additional	Margin bottom for items	number	—	Bottom padding inside the legend between items.
Legend → Additional	Distance between items	number	—	Horizontal spacing between legend entries.
Legend → Style	Font name	text	—	Font family used for titles, labels, or legend text.
Legend → Style	Font style	text	—	Font weight or style (e.g., bold, italic).
Legend → Style	Font size	number	—	Font size in pixels for the selected text element.
Legend → Style	Font color	color	—	Colour of the text shown for this element.
Title → Chart title	Font name	text	—	Font family used for titles, labels, or legend text.
Title → Chart title	Font style	text	—	Font weight or style (e.g., bold, italic).
Title → Chart title	Font size	number	—	Font size in pixels for the selected text element.
Title → Chart title	Font color	color	—	Colour of the text shown for this element.
Title → Chart title	Margin bottom	number	—	Extra space below chart titles or subtitles in pixels.
Title → Chart subtitle	Font name	text	—	Font family used for titles, labels, or legend text.
Title → Chart subtitle	Font style	text	—	Font weight or style (e.g., bold, italic).
Title → Chart subtitle	Font size	number	—	Font size in pixels for the selected text element.
Title → Chart subtitle	Font color	color	—	Colour of the text shown for this element.

🧁 Tip: Use the empty centre to communicate context (“Total MRR”) or trend (+8% vs last month) for extra narrative punch.

Have problems or want to improve this chart type?

Ping us via [email protected].