Donut chart

Use a donut chart for part-to-whole comparisons that benefit from a central annotation.

Every preview on this page is generated from the YAML shown below it using a fixed documentation dataset.

Donut presentation supports rose, centerLabel, labelPosition, innerRadius, and outerRadius. innerRadius: 0 is the boundary that closes the center; use the pie visual when no center is needed.

With outside conditional icon cues and a bottom legend, the chart reserves label columns as the card resizes. Authored radius proportions are retained within the available plot area; use a small category count to keep the cues readable.

Basic

Use one categorical dimension and one metric to show each status as a share of the whole.

Key fields

visuals:
  orders:
    title: Orders by status
    description: Breaks down orders by lifecycle status.
    type: donut
    presentation:
      type: proportional
    query:
      type: aggregate
      dimensions:
      - status
      metrics:
      - order_count
      sort:
      - field: order_count
        direction: desc

Center label

Set presentation.centerLabel to state the total represented by the ring, and adjust the typed inner and outer radii to control the ring diameters.

Key fields

visuals:
  orders_donut_center:
    title: Orders donut with center label
    type: donut
    presentation:
      type: proportional
      centerLabel: Orders
      innerRadius: 0.54
      outerRadius: 0.76
    query:
      type: aggregate
      dimensions:
      - status
      metrics:
      - order_count
      sort:
      - field: order_count
        direction: desc

Alternate metric

Replace the category and metric to compare revenue composition without changing the donut renderer or query shape.

Key fields

visuals:
  category_donut:
    title: Revenue by category donut
    type: donut
    query:
      type: aggregate
      dimensions:
      - category
      metrics:
      - revenue
      sort:
      - field: revenue
        direction: desc
      limit: 8
    presentation:
      type: proportional

API reference

Kind: chart. Renderer: echarts. Supported result shapes: category_value.

Field	Type	Default	Allowed values	Description
`query.dimensions`	`field mapping`	—	—	Groups query results and supplies category or hierarchy labels.
`query.limit`	`integer`	`no limit`	`positive integer`	Caps the number of rows returned to the renderer.
`query.metrics`	`metric mapping`	—	—	Selects governed semantic metrics consumed by the visual shape.
`query.sort`	`sort list`	—	—	Orders query results by a returned field or metric alias.
`presentation.centerLabel`	`string`	`none`	—	Adds a governed text label at the center of a donut.
`presentation.innerRadius`	`number`	`renderer default`	`number from 0 through 1`	Sets the inner proportional radius.
`presentation.outerRadius`	`number`	`renderer default`	`number from 0 through 1`	Sets the outer proportional radius.

Accessibility. Use a descriptive title and unit, and do not rely on color alone to distinguish series or values.