Sunburst Chart

Radial hierarchical visualization for nested data.

"use client"

import { SunburstChart } from "@/components/ui/charts"

// Company revenue breakdown by region and product
const data = {
  name: "Revenue",
  children: [
    {
      name: "Americas",
      color: "#1e40af",
      children: [
        {
          name: "North",
          color: "#2563eb",
          children: [
            { name: "Software", value: 120, color: "#3b82f6" },
            { name: "Services", value: 80, color: "#60a5fa" },
            { name: "Hardware", value: 45, color: "#93c5fd" },
          ],
        },
        {
          name: "South",
          color: "#3b82f6",
          children: [
            { name: "Software", value: 65, color: "#60a5fa" },
            { name: "Services", value: 40, color: "#93c5fd" },
          ],
        },
      ],
    },
    {
      name: "EMEA",
      color: "#1e40af",
      children: [
        {
          name: "Western",
          color: "#2563eb",
          children: [
            { name: "Software", value: 95, color: "#3b82f6" },
            { name: "Services", value: 70, color: "#60a5fa" },
            { name: "Hardware", value: 35, color: "#93c5fd" },
          ],
        },
        {
          name: "Eastern",
          color: "#3b82f6",
          children: [
            { name: "Software", value: 45, color: "#60a5fa" },
            { name: "Services", value: 25, color: "#93c5fd" },
          ],
        },
      ],
    },
    {
      name: "APAC",
      color: "#1e40af",
      children: [
        {
          name: "East Asia",
          color: "#2563eb",
          children: [
            { name: "Software", value: 110, color: "#3b82f6" },
            { name: "Services", value: 85, color: "#60a5fa" },
            { name: "Hardware", value: 55, color: "#93c5fd" },
          ],
        },
        {
          name: "Southeast",
          color: "#3b82f6",
          children: [
            { name: "Software", value: 50, color: "#60a5fa" },
            { name: "Services", value: 30, color: "#93c5fd" },
          ],
        },
      ],
    },
  ],
}

export function SunburstChartDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <SunburstChart
        data={data}
        width={400}
        height={400}
        innerRadius={40}
        showLabels
        labelMinAngle={0.15}
      />
    </div>
  )
}

About

The Sunburst Chart displays hierarchical data as concentric rings radiating from the center.

Installation


pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/sunburst-chart.json

Usage

import { SunburstChart } from "@/components/ui/charts"
 
const data = {
  name: "Total",
  children: [
    {
      name: "Category A",
      children: [
        { name: "A1", value: 50 },
        { name: "A2", value: 30 },
      ],
    },
    { name: "Category B", value: 60 },
  ],
}
 
export function Example() {
  return <SunburstChart data={data} />
}

API Reference

Prop	Type	Default	Description
data	SunburstNode	required	Hierarchical data
innerRadius	number	50	Center hole radius
showLabels	boolean	true	Show segment labels
padAngle	number	0.01	Gap between segments

Examples

Organizational Structure

Company department hierarchy visualization.

"use client"

import { SunburstChart } from "@/components/ui/charts"

// Company organizational structure
const data = {
  name: "Company",
  children: [
    {
      name: "Engineering",
      color: "#1e40af",
      children: [
        { name: "Frontend", value: 25, color: "#2563eb" },
        { name: "Backend", value: 30, color: "#3b82f6" },
        { name: "DevOps", value: 12, color: "#60a5fa" },
        { name: "QA", value: 15, color: "#93c5fd" },
      ],
    },
    {
      name: "Product",
      color: "#1e40af",
      children: [
        { name: "Design", value: 18, color: "#2563eb" },
        { name: "Research", value: 10, color: "#3b82f6" },
        { name: "Analytics", value: 8, color: "#60a5fa" },
      ],
    },
    {
      name: "Sales",
      color: "#1e40af",
      children: [
        { name: "Enterprise", value: 20, color: "#2563eb" },
        { name: "SMB", value: 15, color: "#3b82f6" },
        { name: "Partners", value: 10, color: "#60a5fa" },
      ],
    },
    {
      name: "Operations",
      color: "#1e40af",
      children: [
        { name: "HR", value: 12, color: "#2563eb" },
        { name: "Finance", value: 10, color: "#3b82f6" },
        { name: "Legal", value: 5, color: "#60a5fa" },
      ],
    },
  ],
}

export function SunburstChartOrganizationalDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <SunburstChart
        data={data}
        width={380}
        height={380}
        innerRadius={45}
        showLabels
      />
    </div>
  )
}

Budget Allocation

Annual budget breakdown by department and category.

"use client"

import { SunburstChart } from "@/components/ui/charts"

// Annual budget allocation
const data = {
  name: "Budget",
  children: [
    {
      name: "Marketing",
      color: "#1e40af",
      children: [
        {
          name: "Digital",
          color: "#2563eb",
          children: [
            { name: "Social", value: 45, color: "#3b82f6" },
            { name: "Search", value: 35, color: "#60a5fa" },
            { name: "Display", value: 20, color: "#93c5fd" },
          ],
        },
        {
          name: "Traditional",
          color: "#3b82f6",
          children: [
            { name: "TV", value: 40, color: "#60a5fa" },
            { name: "Print", value: 15, color: "#93c5fd" },
          ],
        },
      ],
    },
    {
      name: "R&D",
      color: "#1e40af",
      children: [
        { name: "Research", value: 80, color: "#2563eb" },
        { name: "Development", value: 120, color: "#3b82f6" },
        { name: "Testing", value: 40, color: "#60a5fa" },
      ],
    },
    {
      name: "Operations",
      color: "#1e40af",
      children: [
        { name: "Infrastructure", value: 65, color: "#2563eb" },
        { name: "Support", value: 45, color: "#3b82f6" },
        { name: "Admin", value: 30, color: "#60a5fa" },
      ],
    },
  ],
}

export function SunburstChartBudgetDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <SunburstChart
        data={data}
        width={380}
        height={380}
        innerRadius={50}
        padAngle={0.02}
        showLabels
      />
    </div>
  )
}

File Size Distribution

Project file structure by size.

"use client"

import { SunburstChart } from "@/components/ui/charts"

// Project file structure by size
const data = {
  name: "Project",
  children: [
    {
      name: "src",
      color: "#1e40af",
      children: [
        {
          name: "components",
          color: "#2563eb",
          children: [
            { name: "ui", value: 85, color: "#3b82f6" },
            { name: "forms", value: 45, color: "#60a5fa" },
            { name: "layout", value: 35, color: "#93c5fd" },
          ],
        },
        {
          name: "lib",
          color: "#3b82f6",
          children: [
            { name: "utils", value: 25, color: "#60a5fa" },
            { name: "hooks", value: 20, color: "#93c5fd" },
          ],
        },
        {
          name: "app",
          color: "#60a5fa",
          children: [
            { name: "pages", value: 55, color: "#93c5fd" },
            { name: "api", value: 40, color: "#bfdbfe" },
          ],
        },
      ],
    },
    {
      name: "public",
      color: "#1e40af",
      children: [
        { name: "images", value: 120, color: "#2563eb" },
        { name: "fonts", value: 35, color: "#3b82f6" },
        { name: "icons", value: 15, color: "#60a5fa" },
      ],
    },
    {
      name: "node_modules",
      color: "#1e40af",
      children: [
        { name: "react", value: 80, color: "#2563eb" },
        { name: "next", value: 150, color: "#3b82f6" },
        { name: "other", value: 200, color: "#60a5fa" },
      ],
    },
  ],
}

export function SunburstChartFilesizeDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <SunburstChart
        data={data}
        width={380}
        height={380}
        innerRadius={35}
        cornerRadius={2}
        showLabels
        labelMinAngle={0.12}
      />
    </div>
  )
}

Minimal

Simple 2-level hierarchy.

"use client"

import { SunburstChart } from "@/components/ui/charts"

// Simple 2-level hierarchy
const data = {
  name: "Total",
  children: [
    {
      name: "Category A",
      color: "#1e40af",
      children: [
        { name: "A1", value: 30, color: "#3b82f6" },
        { name: "A2", value: 25, color: "#60a5fa" },
      ],
    },
    {
      name: "Category B",
      color: "#2563eb",
      children: [
        { name: "B1", value: 40, color: "#60a5fa" },
        { name: "B2", value: 20, color: "#93c5fd" },
      ],
    },
    {
      name: "Category C",
      color: "#3b82f6",
      children: [
        { name: "C1", value: 35, color: "#93c5fd" },
        { name: "C2", value: 15, color: "#bfdbfe" },
      ],
    },
  ],
}

export function SunburstChartMinimalDemo() {
  return (
    <div className="mx-auto w-full max-w-sm">
      <SunburstChart
        data={data}
        width={320}
        height={320}
        innerRadius={55}
        padAngle={0.02}
        showLabels
      />
    </div>
  )
}

Notes

The sunburst chart is ideal for visualizing hierarchical data with multiple nested levels
Each ring represents a level in the hierarchy, with segments sized proportionally to their values
Interactive hover states help users explore the data structure
The innerRadius prop controls the size of the center hole, allowing for donut-style visualizations
Use padAngle to add visual separation between segments for improved readability

Treemap Chart Sankey Chart

On This Page

About Installation Usage API Reference Examples Organizational Structure Budget Allocation File Size Distribution Minimal Notes

Deploy and Scale Agents with Simplifying AI

Simplifying AI delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.