Doughnut

Who it’s for

Anyone who needs a share-of-total chart that also states the total. A pie shows how the split falls; a doughnut keeps the middle free for the number everything adds up to, which is usually the figure a reader was after in the first place.

What it does

The Doughnut chart draws one ring segment per data key, sized by that key’s latest value, with the combined total available in the center. Two keys reading Wind power = 60 and Solar power = 40 render as a two-segment ring; switching the layout to With total prints their sum in the hole.

• The center carries the total, so the chart answers both “how does it split” and “how much is there” without a second widget.
• Two layouts — the default plain ring, or With total which reserves and styles the central figure.
• The central total takes its own font and color, and the color accepts ranges, so the total can change appearance once it crosses a threshold.
• Auto scale keeps ring and central text in proportion as the tile is resized.
• Tooltips can report absolute values or percentages with their own decimals.
• Segment order and direction are configurable, keeping the chart stable when a key is added later.
• The Doughnut chart shows the current split: it plots no history, and the central figure is the sum of the series rather than a separately configurable value.

How to set up

Data keys

The Doughnut chart takes one ring segment per data key, from one or more datasources.

Key	Role	Type	Description
Wind power	One ring segment, sized by its latest value	Timeseries	Numeric values only. Attributes work equally well. Add one key per segment; the key’s label captions the segment and its legend row.

All keys must share a unit for both the proportions and the central total to be meaningful — the total is a plain sum of whatever arrives. Negative values cannot be drawn as a share and should be excluded.

How to customize

• To show the total in the middle — set Layout to With total, then set the Central total value font and color.
• To make the total react to its own size — set the central value’s color to a range instead of a constant.
• To keep proportions at any tile size — leave Auto scale on; turn it off to pin exact font sizes.
• To show the underlying numbers — turn on Legend and Show total value, and style its label and value text.
• To report percentages instead of values on hover — set the tooltip’s value type accordingly, with the decimals the reader needs.
• To keep segment order stable — turn on Sort series by label, so a new key does not reshuffle the colors.
• To reverse the drawing direction — toggle Clockwise layout.
• To position the legend — set its Position to sit above, below or beside the ring.

Tips

• Choose With total whenever the sum is the headline and the split is the detail. On a generation or consumption dashboard that is almost always the case, and it saves a value card sitting beside the chart repeating the same arithmetic.
• Keep the segment count low enough that the ring stays readable — about five. Beyond that, the legend does the communicating and the ring is decoration, at which point a bar chart is the better shape.