Examples · Sunburst

Sunburst chart examples

An electricity mix contains broad sources and individual technologies. The inner ring groups renewables together; the outer ring splits that group into wind, solar and hydro. Sector angles represent generation. These figures describe an illustrative country, not measured output.

When to use it

  • A total split into groups whose items use the same unit
  • A reader needs to follow the relationship between a category and its parts

Not the right shape?

Use a treemap or bar chart for close comparisons. This maker supports two levels only. A sunburst cannot show a third level, and a series over time belongs in a line chart.

Real-world examples

Website visits by channel and source

Search engines sit within Search, and each newsletter sits within Email. Open a channel to compare its sources without the rest of the traffic filling the circle.

Open in maker with this data

View the spec 
{
  "type": "sunburst",
  "theme": "editorial",
  "title": "How visitors arrived",
  "source": "Illustrative data · visits",
  "data": {
    "labels": [],
    "series": [],
    "nodes": [
      {
        "id": "g0",
        "label": "Search"
      },
      {
        "id": "i0",
        "parentId": "g0",
        "label": "Google",
        "value": 4200
      },
      {
        "id": "i1",
        "parentId": "g0",
        "label": "Bing",
        "value": 800
      },
      {
        "id": "g1",
        "label": "Email"
      },
      {
        "id": "i2",
        "parentId": "g1",
        "label": "Weekly digest",
        "value": 1800
      },
      {
        "id": "i3",
        "parentId": "g1",
        "label": "Product update",
        "value": 700
      },
      {
        "id": "g2",
        "label": "Referral"
      },
      {
        "id": "i4",
        "parentId": "g2",
        "label": "Partner sites",
        "value": 1500
      }
    ]
  }
}

Food groups in a sample daily menu

All values measure energy in kcal. The chart describes this fictional menu; it does not prescribe a diet or compare food by weight.

Open in maker with this data

View the spec 
{
  "type": "sunburst",
  "theme": "editorial",
  "title": "Energy in a sample menu",
  "source": "Illustrative data · kcal",
  "data": {
    "labels": [],
    "series": [],
    "nodes": [
      {
        "id": "g0",
        "label": "Grains"
      },
      {
        "id": "i0",
        "parentId": "g0",
        "label": "Rice",
        "value": 500
      },
      {
        "id": "i1",
        "parentId": "g0",
        "label": "Oats",
        "value": 300
      },
      {
        "id": "g1",
        "label": "Protein foods"
      },
      {
        "id": "i2",
        "parentId": "g1",
        "label": "Beans",
        "value": 350
      },
      {
        "id": "i3",
        "parentId": "g1",
        "label": "Eggs",
        "value": 150
      },
      {
        "id": "g2",
        "label": "Other foods"
      },
      {
        "id": "i4",
        "parentId": "g2",
        "label": "Vegetables",
        "value": 200
      },
      {
        "id": "i5",
        "parentId": "g2",
        "label": "Fruit",
        "value": 250
      },
      {
        "id": "i6",
        "parentId": "g2",
        "label": "Oils",
        "value": 250
      }
    ]
  }
}
Open this chart in a maker Sunburst chart maker from scratch

Questions people ask

How does a sunburst differ from a donut or treemap?

A donut shows one level of parts. A sunburst adds an inner ring for groups and puts their items outside it. A treemap shows the same hierarchy in nested rectangles; choose it when comparing sizes matters more than following the rings.

What happens when I open a group?

Its items fill the circle. Choose All or press Escape to return. If a tooltip is pinned, the first Escape releases it and the next returns to all groups.

Can I keep missing values?

Enter No data. The item gets no angle, remains in the data table and is reachable with arrow keys. A positive value too small to draw is listed separately and still contributes to the total.