Horizontal doughnut

Who it’s for

Dashboard builders fitting a share-of-total chart into a row rather than a block. A standard doughnut wants a square; this variant puts the ring on one side and the legend beside it, so the same comparison fits a wide, shallow tile in a header band or a side column.

What it does

The Horizontal doughnut chart draws one ring segment per data key and lays the ring out alongside its legend rather than above it. Two keys reading Wind power = 60 and Solar power = 40 render as a two-segment ring on a 4×2.5 tile with their labels and values listed beside it, and the combined total can sit in the center.

• Built for a shallow tile — the horizontal arrangement is what makes a proportional chart usable in a strip that a square doughnut would overflow.
• The center can carry the combined total, styled with its own font and color, and the color accepts ranges.
• Auto scale keeps ring and text in proportion as the strip is stretched.
• The legend does more work in this layout, so its per-series values and totals matter more than on a square chart.
• Tooltips can report absolute values or percentages with their own decimals.
• The Horizontal doughnut shows the current split: it plots no history, and the central figure is the sum of the series rather than an independent value.

How to set up

Data keys

The Horizontal doughnut 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 make sense. Keep the key count low: the legend sits beside the ring in this layout, so each additional series eats width the ring needs.

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 as the strip stretches — leave Auto scale on; turn it off to pin exact font sizes.
• To fit more series into the width — reduce the legend’s label and value font sizes, or turn off Show total value to shorten each row.
• To report percentages instead of values on hover — set the tooltip’s value type accordingly.
• To keep segment order stable — turn on Sort series by label.
• To reverse the drawing direction — toggle Clockwise layout.

Tips

• Use this variant in a header band above the detail it summarizes. A shallow proportional chart works as a heading; the same chart in the middle of a dashboard reads as content and invites the precision it cannot give.
• Keep to two or three segments here rather than the five a square doughnut tolerates. The legend competes with the ring for horizontal space, and past three rows the ring shrinks to the point where the proportions stop being readable.