Charts

Sunburst Chart

Show hierarchical data as rings of sectors

A sunburst chart shows a tree as rings. The inner ring holds the top-level groups; each ring further out holds their children. The angle of a sector is proportional to its value.

Use it for two or three levels of a part-to-whole hierarchy. For a flat list of parts, a Pie Chart is easier to read; for many leaves, use a Treemap.

Data structure

data is one root object, not an array. The root itself is not drawn; its children form the inner ring.

import type { SunburstData } from 'vccs'

const data: SunburstData = {
  name: 'Traffic',
  children: [
    {
      name: 'Search',
      fill: '#f97316',
      children: [
        { name: 'Google', value: 420 },
        { name: 'Bing', value: 90 },
      ],
    },
    { name: 'Direct', value: 160 },
  ],
}

Leaves need a numeric value (or the field named by data-key). Numeric strings such as "12" count as numbers. A parent's value is the sum of its children.
fill on a node colors that node. Without it, a node takes the fill prop, then its top-level group's fill, then the series color of its group (--v-charts-series-1 and up).
The chart renders nothing when the root has no children.

Props

Prop	Type	Default	Description
`data`	`SunburstData`	required	Root node with nested `children`
`data-key`	`string \| number \| (node) => unknown`	`'value'`	Field with the numeric value
`name-key`	`string \| number \| (node) => unknown`	`'name'`	Field with the node name
`inner-radius`	`number`	`50`	Radius of the hole in the center, in px
`outer-radius`	`number`	half the smaller side	Radius of the outer ring, in px
`cx` / `cy`	`number`	center	Center of the rings, in px
`start-angle`	`number`	`0`	Angle where the first sector starts, in degrees
`end-angle`	`number`	`360`	Angle where the last sector ends, in degrees
`ring-padding`	`number`	`2`	Space between rings, in px
`padding`	`number`	`2`	Angle between sectors, in degrees. At most half the angle of a sector
`fill`	`string`	per group	Fill for nodes without their own `fill`
`stroke`	`string`	`var(--v-charts-background, #fff)`	Sector border color
`title`	`string`	`'Sunburst chart'`	Accessible name
`desc`	`string`	—	Accessible description
`width` / `height` / `aspect`	`number`	full width	Size. See Chart Size
`initial-dimension`	`{ width, height }`	—	Size before the first measurement
`is-animation-active`	`boolean`	`true`	Animate entry and data changes
`transition`	`ChartTransition`	motion tokens	Timing of data changes. See Animation

When the data changes, sectors match by their name path from the inner ring outwards. A new sector grows out of its neighbor; a removed one folds into it.

Events

Event	Payload	Description
`@node-click`	`(node, index, event: MouseEvent \| KeyboardEvent)`	Click on a sector, or `Enter` on the active sector
`@node-mouseenter`	`(node, index, event: MouseEvent)`	Pointer enters a sector; the tooltip shows it
`@node-mouseleave`	`(node, index, event: MouseEvent)`	Pointer leaves a sector
`@animation-start` / `@animation-end`	—	A data change animation starts or ends

node is a SunburstLayoutNode: { name, value, depth, payload, path, cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill? }. payload is your data object. index is the position of the sector in the layout. The chart also emits the pointer events of every chart, such as @click and @mousemove; see Events and v-model.

Slots

Slot	Props	Description
`#content`	`SunburstContentSlotProps`	Replaces each sector. Receives the layout node plus `index`
default	—	Place `<Tooltip>` here

Draw your own sectors with the Sector shape:

<SunburstChart :data="data" :height="320">
  <template #content="{ cx, cy, innerRadius, outerRadius, startAngle, endAngle, depth }">
    <Sector
      :cx="cx"
      :cy="cy"
      :inner-radius="innerRadius"
      :outer-radius="outerRadius"
      :start-angle="startAngle"
      :end-angle="endAngle"
      :fill="depth === 1 ? '#f97316' : '#14b8a6'"
      stroke="#fff"
    />
  </template>
</SunburstChart>

Keyboard

The chart is one focusable element (role="application", named by title). With focus:

ArrowRight or ArrowDown moves to the next sector, ArrowLeft or ArrowUp to the previous one. The order is depth first: a group, then its children, then the next group.
Home and End jump to the first and last sector.
Enter emits node-click for the active sector.
Escape clears the selection.

The tooltip follows the active sector, and a live region reads its text. See Accessibility.

Treemap: the same data as nested rectangles
Pie Chart: one level of parts
Tooltip: customize the tooltip content

Edit this pageorReport an issue

Treemap

Visualize hierarchical data as nested rectangles

Sankey

Flow diagrams showing the magnitude of flow between nodes