Donut chart
Pie with center label. What the donut chart is for, the data it needs and every option it has.
5 min read
On this page
Pie with center label. It sits in the Part-of-whole group of the widget library.
When to use it#
Use a donut chart for the same job as a pie, showing how one total splits into a few parts, when you also want the total itself on show. The centre shows the sum of the slices, for example total spending this month with the split by category around it.
When to pick something else#
- Don't need the total in the centre? A Pie chart gives the slices more room.
- Comparing the parts to each other? Use a Bar chart.
- Tracking one number against a goal? Use a Progress ring or a Gauge.
- Categories inside groups (category and sub-category)? Use a Sunburst.
The data it needs#
Pick these in the Data tab of the inspector. BankSync suggests a column for each when your source has an obvious match.
| Field | Needed | Pick | Notes |
|---|---|---|---|
| Category | Yes | a category | |
| Value | Yes | a number |
Rows that share a category are combined before drawing: choose Sum, Average, Count, Min or Max on the value field. See Binding data.
Donut chart options#
Set these on the Style tab of the inspector. "Automatic" means BankSync picks a value from the chart's size and data.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Hole size | Size of the hole as a fraction of the radius. Values are kept between 0.2 and 0.9. | Number, 0 to 1 | 0.5 |
| Start angle | Where the first slice starts, in degrees; 0 is 12 o’clock. Use with the end angle for a half or partial circle. | Number | Automatic |
| End angle | Where the last slice ends, in degrees. 360 closes the full circle; 180 makes a half. | Number | Automatic |
| Slice gap | Empty space between slices, in pixels. | Number, 0 or more | Automatic |
| Corner radius | Rounds the corners of the shapes, in pixels. 0 keeps them square. | Number, 0 or more | Automatic |
| Sort by size | Order slices or groups from largest to smallest. | On or off | Automatic |
Needs history#
Show a note instead of the chart until the rows cover enough periods, so a first week never reads as a trend.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Date field | The date column whose distinct periods are counted. | Text | Automatic |
| Period | What counts as one period: a day, week, month, quarter or year. | Day, Week, Month, Quarter, Year | Automatic |
| Periods needed | How many distinct periods the rows must cover before the chart draws (2 to 60). | Whole number, 2 to 60 | Automatic |
| Waiting message | Shown until there is enough history. Leave empty for a message naming the periods. | Text, up to 120 characters | Automatic |
Centre label#
Text in the donut hole. By default it shows the total with the caption "total".
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Centre text | Fixed text shown in the hole in place of the total. | Text | Automatic |
| Centre total column | Show the total of this column in the hole instead of the total of the slices. Ignored when centre text is set. | Text | Automatic |
| Centre text size | Text size of the centre value, in pixels. Leave empty to fit the hole. | Number | Automatic |
| Centre text colour | Colour of the centre value. | Colour | Automatic |
| Centre caption | Small caption under the centre value. Defaults to "total" when no centre text is set. | Text | Automatic |
| Caption colour | Colour of the caption under the centre value. | Colour | Automatic |
Slice labels#
Text written on or beside each slice: its name, value or share.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Show slice labels | Write a label on each slice. Slices too small to hold one are skipped. | On or off | Automatic |
| Label position | Inside the slice, on its outer edge, or outside the circle with room reserved beside it. | Inside, Outside, Perimeter | Automatic |
| Label content | What each label says: the category, the value, the percentage, or the category with one of them. | Category, Value, Percent, Category and value, Category and percent | Automatic |
| Label size | Text size of the slice labels, in pixels. | Number | Automatic |
| Label colour | Colour of the slice labels. Leave empty to pick black or white for contrast automatically. | Colour | Automatic |
| Smallest labelled slice | Skip labels on slices smaller than this share of the total, from 0 to 1 (0.05 is 5%). | Number, 0 to 1 | Automatic |
Shared chart styling#
Every chart also has the shared styling options. These apply to this one:
- Legend: position, layout and which series show.
- Axes: titles, tick labels and number format.
- Grid, title, padding and background.
- Value labels on the marks.
- Categories and labels: top N with "Other", sort order, readable labels, the handwritten callout.
- Style: corner radius, line width, opacity and animation.
- Tooltip on hover.
- Click to filter: clicking a mark can filter the rest of the dashboard. See Filters and cross-filtering.
- Colours: follow the dashboard palette or pick one for this chart.
Messy data#
- Rows with the same category are added together; the seven largest get their own slice and the rest share one grey "Other" slice (eight slices by default).
- Negative values are left out and counted in the tooltip, and the centre total only adds up the slices you can see. If every value is negative you see "Only negative values; nothing to split".
- An all-zero period shows "Everything is zero for this period".
On a phone#
The legend moves under the ring with each slice's share. The centre total stays while the ring has room, so a donut keeps its headline number better than most charts on a narrow screen.
Related charts#
- Pie chart: Categorical share
- Treemap: Nested rectangles by value
- Sunburst: Hierarchical radial wedges
- Nightingale: Radial polar pie
- Radial bar: Polar bar chart
- Mosaic: Marimekko tiled cells
- Waffle: 100-unit grid share
- Funnel: Conversion stage flow
- Pyramid: Inverted funnel
Use this page with your AI assistant
Every BankSync doc is available as plain Markdown for agents and LLMs.