Sunburst charts visualize hierarchical data as concentric rings, with the root at the center and child nodes fanning outward. Each ring represents a level of the hierarchy, and each arc's angle is proportional to its value relative to its siblings. They excel at showing both the structure and the relative size of each node simultaneously.

Subtype

▾

Live Preview

value	id
0	total
0	engineering
2800000	eng-salaries
420000	eng-tools
85000	eng-training
0	sales
1800000	sales-salaries
640000	sales-commissions
220000	sales-travel
0	marketing

{
  "title": {
    "text": "Company Expenses — 2-Level Breakdown"
  },
  "data": [
    {
      "id": "total",
      "parent": null,
      "name": "Total",
      "value": 0
    },
    {
      "id": "engineering",
      "parent": "total",
      "name": "Engineering",
      "value": 0
    },
    {
      "id": "eng-salaries",
      "parent": "engineering",
      "name": "Salaries",
      "value": 2800000
    },
    {
      "id": "eng-tools",
      "parent": "engineering",
      "name": "Tools & Infra",
      "value": 420000
    },
    {
      "id": "eng-training",
      "parent": "engineering",
      "name": "Training",
      "value": 85000
    },
    {
      "id": "sales",
      "parent": "total",
      "name": "Sales",
      "value": 0
    },
    {
      "id": "sales-salaries",
      "parent": "sales",
      "name": "Salaries",
      "value": 1800000
    },
    {
      "id": "sales-commissions",
      "parent": "sales",
      "name": "Commissions",
      "value": 640000
    },
    {
      "id": "sales-travel",
      "parent": "sales",
      "name": "Travel",
      "value": 220000
    },
    {
      "id": "marketing",
      "parent": "total",
      "name": "Marketing",
      "value": 0
    },
    {
      "id": "mkt-digital",
      "parent": "marketing",
      "name": "Digital Ads",
      "value": 680000
    },
    {
      "id": "mkt-events",
      "parent": "marketing",
      "name": "Events",
      "value": 320000
    },
    {
      "id": "mkt-content",
      "parent": "marketing",
      "name": "Content",
      "value": 180000
    }
  ],
  "series": [
    {
      "type": "sunburst",
      "nameKey": "id",
      "parentKey": "parent",
      "valueKey": "value"
    }
  ]
}

Edit JSON above · auto-previews after 0.9 s

A two-level sunburst grouping company expenses by department then by category.

PreviousWaffle Charts Next Histogram

Was this article helpful?