Data & ChartsPro

Sunburst

Sunburst for a hierarchy as rings, or as circle packing.

Usage

Revenue by line

Revenue by product line, data table
label	Value
Software	$1.1M
Services	$350k
Hardware	$240k
Marketplace	$155k
Core	$340k
Pro	$260k
Enterprise	$410k
Add-ons	$90k
Onboarding	$120k
Training	$80k
Support	$150k
Devices	$180k
Accessories	$60k
Templates	$70k
Plugins	$55k
Themes	$30k

Installation

Sunburst comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx

import {
  SunburstChart,
  SunburstChartProps,
  SunburstChartVariant,
} from "@wunderui/react"

Examples

Basic Sunburst

Revenue by line

Revenue by product line, data table
label	Value
Software	$1.1M
Services	$350k
Hardware	$240k
Marketplace	$155k
Core	$340k
Pro	$260k
Enterprise	$410k
Add-ons	$90k
Onboarding	$120k
Training	$80k
Support	$150k
Devices	$180k
Accessories	$60k
Templates	$70k
Plugins	$55k
Themes	$30k

Circle Packing

Revenue by line

Revenue by product line, data table
label	Value
Software	$1.1M
Services	$350k
Hardware	$240k
Marketplace	$155k
Core	$340k
Pro	$260k
Enterprise	$410k
Add-ons	$90k
Onboarding	$120k
Training	$80k
Support	$150k
Devices	$180k
Accessories	$60k
Templates	$70k
Plugins	$55k
Themes	$30k

State – Loading

Revenue by line

State – Hover

Revenue by line

Revenue by product line, data table
label	Value
Software	$1.1M
Services	$350k
Hardware	$240k
Marketplace	$155k
Core	$340k
Pro	$260k
Enterprise	$410k
Add-ons	$90k
Onboarding	$120k
Training	$80k
Support	$150k
Devices	$180k
Accessories	$60k
Templates	$70k
Plugins	$55k
Themes	$30k

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Revenue Mix

Revenue by line and product, with the totals.

Revenue mix

Revenue mix, data table
label	Value
Software	$1.1M
Services	$350k
Hardware	$240k
Marketplace	$155k
Core	$340k
Pro	$260k
Enterprise	$410k
Add-ons	$90k
Onboarding	$120k
Training	$80k
Support	$150k
Devices	$180k
Accessories	$60k
Templates	$70k
Plugins	$55k
Themes	$30k

By line

Software
$1.1M
Services
$350k
Hardware
$240k
Marketplace
$155k

API Reference

Prop	Type	Default
variant	"basic-sunburst" \| "circle-packing"	"basic-sunburst"
data	{ name, value?, color?, children? }	—
centerLabel	string	"total"
state	"ready" \| "loading" \| "empty" \| "error"	"ready"
hiddenSeries · animate · animationKey	string[] · boolean · string \| number	—
activeIndex	number \| null	—
animate	boolean	—
animationKey	string \| number	—
className	string	—
defaultActiveIndex	number \| null	—
description	string	—
height	number	360
hiddenSeries	readonly string[]	—
label	string	—
onActiveIndexChange	(index: number \| null) => void	—
onRetry	() => void	—
valueFormatter	ChartValueFormatter	—
width	number	—

Theming

The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.

Variable	Used for	Default
Color
	Fill, value	#000000dark #FFFFFF
	Fill	#6E6E70dark #A2A3A3
Motion
	Duration	250ms
	Easing	cubic-bezier(0.22, 1, 0.36, 1)

PreviousStatus Tracker NextTimeline Chart