Sunburst

Explore the current hierarchy level as proportional radial sectors.

Chart ID: sunburst. Independent import: @revolist/charts/sunburst.

Live example

Loading chart…

Reading the chart

Read hierarchy from the center outward. Angular spans show branch weights and successive rings show deeper levels, so descendants retain the angular scope of their parent.

Data requirements

Supply semantic hierarchy paths and numeric weights. Treemap and sunburst can render complete trees; icicle and circle packing use their supported hierarchy projections. Hierarchy fields, IDs and labels must describe the same paths.

Use non-negative values for this chart. Negative values are rejected; explicit nulls represent missing observations.

The roles below describe the chart's data contract. Generic category/value roles resolve from the dataset; explicitly bind specialized numeric roles as shown in the complete example.

Data role	Field count
hierarchy	1 or more
weight	1

Download the complete sample data and settings (JSON). See Data & Configuration for mapping, null values, updates and lifecycle rules.

Create this chart

Install the package using the installation guide, give the host an explicit height, and call createSunburstChart after the host mounts. This factory fixes the chart type to sunburst.

<div id="chart" style="width: 100%; height: 450px;"></div>

Complete runnable TypeScript example with sample data

import { createSunburstChart } from '@revolist/charts/sunburst';

const container = document.getElementById('chart')!;
const chart = await createSunburstChart({
  container,
  "data": [
    {
      "id": 1,
      "region": "Europe",
      "country": "Portugal",
      "city": "Lisbon",
      "value": 22
    },
    {
      "id": 2,
      "region": "Europe",
      "country": "Portugal",
      "city": "Porto",
      "value": 12
    },
    {
      "id": 3,
      "region": "Europe",
      "country": "Spain",
      "city": "Madrid",
      "value": 18
    },
    {
      "id": 4,
      "region": "Europe",
      "country": "Spain",
      "city": "Barcelona",
      "value": 14
    },
    {
      "id": 5,
      "region": "Americas",
      "country": "USA",
      "city": "Boston",
      "value": 20
    },
    {
      "id": 6,
      "region": "Americas",
      "country": "USA",
      "city": "Austin",
      "value": 15
    },
    {
      "id": 7,
      "region": "Americas",
      "country": "Canada",
      "city": "Toronto",
      "value": 16
    },
    {
      "id": 8,
      "region": "Americas",
      "country": "Canada",
      "city": "Vancouver",
      "value": 10
    }
  ],
  "mapping": {
    "category": {
      "field": "id",
      "path": [
        "region",
        "country",
        "city"
      ]
    },
    "series": [
      {
        "field": "value",
        "label": "Revenue"
      }
    ]
  },
  "presentation": {
    "dataLabels": false
  }
});

// When the host unmounts:
// chart.destroy();

Await updates before reading a snapshot or exporting. Call chart.destroy() when the host unmounts. See the live catalog to interact with this type.

Supported options

Set these fields in chartOptions. The option schema validates supported keys, ranges and choices; updating chartOptions replaces that authored object.

Option	Default	Accepted values
markOpacity	1	0.2 to 1; step 0.05

Titles, legends, theme and labels belong to presentation or the corresponding top-level setting. Axis, color, navigation and interaction support depends on the selected chart; see Data & Configuration.

Related charts

• Treemap — Compare hierarchical values as proportional nested tiles.
• Icicle — Explore hierarchy through proportional stacked rectangles.
• Circle packing — Explore hierarchy through proportional nested circles.
• Organization chart — Show connected parent and child cards.

Charts overview · Installation · Data & Configuration