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].

Last updated

Was this helpful?