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
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?