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.

Basic

Use one categorical dimension and one measure to show each status as a share of the whole, with the center left open for visual breathing room.

Key fields

visuals:
  orders:
    title: Orders by status
    description: Breaks down orders by lifecycle status.
    type: donut
    query:
      dimensions:
        status: orders.status
      measures:
        order_count: null
      sort:
        - field: value
          direction: desc

Alternate measure

Replace the category and measure 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:
      dimensions:
        category: orders.category
      measures:
        revenue: null
      sort:
        - field: value
          direction: desc
      limit: 8

Center label

Set presentation.center_label 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:
      center_label: Orders
      inner_radius: 0.54
      outer_radius: 0.76
    query:
      dimensions:
        status: orders.status
      measures:
        order_count: null
      sort:
        - field: value
          direction: desc

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, hierarchy, matrix, graph, or geographic labels.
`query.limit`	`integer`	`no limit`	`positive integer`	Caps the number of rows returned to the renderer.
`query.measures`	`measure mapping`	—	—	Selects the governed semantic measures consumed by the visual shape.
`query.sort`	`sort list`	—	—	Orders query results by a returned field or measure alias.
`presentation.center_label`	`string \| boolean`	`none`	—	Adds a total or custom label to the center of a donut.
`presentation.inner_radius`	`number`	`renderer default`	`0–1`	Sets the inner radius of a donut.
`presentation.outer_radius`	`number`	`renderer default`	`0–1`	Sets the outer radius of a pie or donut.

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