# Create Donut chart

### 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 <hello@chartplugin.com>.