Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Sunburst Chart with Breadcrumb

Cloud spend drilled into one team, with a breadcrumb trail that zooms back to any level. For React with TanStack Charts, in your shadcn/ui theme: the live chart, its code and a one-line install.

Charting library: TanStack Charts

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { ChartSunburstBreadcrumb } from "@/components/charts/chart-sunburst-breadcrumb";
<ChartSunburstBreadcrumb />

API Reference

SunburstChart

PropType
dataSunburstNode

Hierarchical data tree. Parent values are summed from their children.

size?number

Chart diameter in pixels. The chart shrinks to fit narrower containers.

Default
520
playKey?number

Change this number to replay the enter animation.

Default
0
className?string

Additional class name for the chart wrapper.

focusId?string

Controlled drill-down focus: the id of the focused node (names from the root joined with " / "). Omit for uncontrolled drill-down.

onFocusChange?(focusId: string) => void

Called with the new node id when the focus changes through a segment click, the center hub, a keyboard zoom or a breadcrumb.

Type
(focusId: string) => void
hoveredIndex?number | null

Controlled hover: the index of the hovered arc in the arcs array returned by buildArcs, or null for none.

Type
number | null
onHoverChange?(index: number | null) => void

Called with the arc index (or null) when the hovered arc changes.

Type
(index: number | null) => void
hoverPop?number

How far in pixels the hovered segment grows outward.

Default
8
padding?number

Inset in pixels reserved inside the chart for hover growth, relative to size.

Default
derived from the tree depth, `size` and `hoverPop`
enterTransition?SunburstEnterTransition

Overrides the enter animation. Only duration (in seconds) is used.

Default
{ duration: 1.1 }
enterStaggerScale?number

Scales the stagger between rings and segments during the enter animation.

Default
1
ariaLabel?string

Accessible label of the chart.

Default
"Sunburst chart of " followed by the root's `name`
ariaDescription?string

Longer accessible description of the chart.

Default
the keyboard instructions: arrow keys to inspect, Enter or Space to zoom in, Escape or the center disc to zoom out
childrenReactNode

SunburstSegment, SunburstCenter, SunburstLabels, SunburstBreadcrumb and SunburstHint children. Render one SunburstSegment per arc index to customize individual segments.

SunburstBreadcrumb

PropType
className?string

Class name of the wrapping nav element.

childrenReactNode

Breadcrumb UI, usually built from useSunburstBreadcrumbItems.

SunburstCenter

PropType
className?string

Accepted for bklit compatibility; it has no effect.

SunburstLabels

PropType
fontSize?number

Label font size in pixels.

Default
11
fill?string

Label text color.

Default
"var(--chart-label)"
stroke?string

Color of the halo behind the label text.

Default
"var(--chart-background)"
strokeWidth?number

Width in pixels of the halo behind the label text. Use 0 to disable it.

Default
2.5
className?string

Accepted for bklit compatibility; it has no effect.

SunburstHint

PropType
className?string

Class name of the hint element.

children?ReactNode | ((context: SunburstHintContext) => ReactNode)

Custom hint content, or a function receiving the hint context. Defaults to the hovered path or zoom instructions.

Type
ReactNode | ((context: SunburstHintContext) => ReactNode)
All 104 charts