Sunburst chart

Examples and usage of SunburstChart component

The SunburstChart component visualizes hierarchical data using nested circular sectors. It’s similar to a Treemap but uses polar coordinates, making it effective for showing multi-level hierarchies and proportions.

Basic sunburst chart

import { SunburstChart, Tooltip } from 'recharts';

const data = {
  name: 'Root',
  children: [
    {
      name: 'Group A',
      children: [
        { name: 'A1', value: 100 },
        { name: 'A2', value: 200 },
        { name: 'A3', value: 150 },
      ],
    },
    {
      name: 'Group B',
      children: [
        { name: 'B1', value: 300 },
        { name: 'B2', value: 100 },
      ],
    },
    {
      name: 'Group C',
      children: [
        { name: 'C1', value: 250 },
        { name: 'C2', value: 150 },
        { name: 'C3', value: 200 },
      ],
    },
  ],
};

function Example() {
  return (
    <SunburstChart
      width={500}
      height={500}
      data={data}
      dataKey="value"
      fill="#8884d8"
      stroke="#fff"
    >
      <Tooltip />
    </SunburstChart>
  );
}

Custom colors per node

const dataWithColors = {
  name: 'Root',
  children: [
    {
      name: 'Group A',
      fill: '#8884d8',
      children: [
        { name: 'A1', value: 100, fill: '#8884d8' },
        { name: 'A2', value: 200, fill: '#83a6ed' },
        { name: 'A3', value: 150, fill: '#8dd1e1' },
      ],
    },
    {
      name: 'Group B',
      fill: '#82ca9d',
      children: [
        { name: 'B1', value: 300, fill: '#82ca9d' },
        { name: 'B2', value: 100, fill: '#a4de6c' },
      ],
    },
  ],
};

<SunburstChart
  width={500}
  height={500}
  data={dataWithColors}
  dataKey="value"
  stroke="#fff"
/>

Custom inner and outer radius

Large center

<SunburstChart
  width={500}
  height={500}
  data={data}
  dataKey="value"
  innerRadius={100}
  outerRadius={200}
  fill="#8884d8"
/>

Ring padding

<SunburstChart
  width={500}
  height={500}
  data={data}
  dataKey="value"
  ringPadding={5}
  padding={2}
  fill="#8884d8"
  stroke="#fff"
/>

• padding: Space between sectors within the same level
• ringPadding: Space between hierarchical levels

Custom angles

Full circle (default)

<SunburstChart
  width={500}
  height={500}
  data={data}
  dataKey="value"
  startAngle={0}
  endAngle={360}
  fill="#8884d8"
/>

Custom center position

<SunburstChart
  width={600}
  height={400}
  data={data}
  dataKey="value"
  cx={200}
  cy={200}
  fill="#8884d8"
/>

cx and cy can be numbers (pixels) or percentages. If undefined, the chart centers automatically.

Custom text options

<SunburstChart
  width={500}
  height={500}
  data={data}
  dataKey="value"
  fill="#8884d8"
  textOptions={{
    fontWeight: 'bold',
    fontSize: '0.875rem',
    fill: 'white',
    stroke: '#000',
    strokeWidth: 0.5,
  }}
/>

Event handlers

import { useState } from 'react';

function Example() {
  const [activeNode, setActiveNode] = useState(null);

  return (
    <SunburstChart
      width={500}
      height={500}
      data={data}
      dataKey="value"
      fill="#8884d8"
      onMouseEnter={(node) => setActiveNode(node.name)}
      onMouseLeave={() => setActiveNode(null)}
      onClick={(node) => console.log('Clicked:', node.name)}
    >
      <Tooltip />
    </SunburstChart>
  );
}

Deep hierarchy example

const deepData = {
  name: 'Organization',
  children: [
    {
      name: 'Engineering',
      children: [
        {
          name: 'Frontend',
          children: [
            { name: 'React Team', value: 15 },
            { name: 'Vue Team', value: 10 },
          ],
        },
        {
          name: 'Backend',
          children: [
            { name: 'Node Team', value: 12 },
            { name: 'Python Team', value: 18 },
          ],
        },
      ],
    },
    {
      name: 'Sales',
      children: [
        { name: 'North America', value: 25 },
        { name: 'Europe', value: 20 },
        { name: 'Asia', value: 30 },
      ],
    },
  ],
};

<SunburstChart
  width={600}
  height={600}
  data={deepData}
  dataKey="value"
  fill="#8884d8"
  stroke="#fff"
/>

Custom name and value keys

const customData = {
  label: 'Root',
  items: [
    {
      label: 'Group A',
      items: [
        { label: 'A1', size: 100 },
        { label: 'A2', size: 200 },
      ],
    },
  ],
};

<SunburstChart
  width={500}
  height={500}
  data={customData}
  dataKey="size"
  nameKey="label"
  fill="#8884d8"
/>

The data structure must use children as the key for nested items. Use nameKey to specify which field contains display names.

Responsive sunburst

<SunburstChart
  width={500}
  height={500}
  data={data}
  dataKey="value"
  responsive={true}
  fill="#8884d8"
/>

Common pitfalls

• Data structure: Root node must have a children array. Leaf nodes should have the value property specified by dataKey.
• Automatic calculations: Parent node values are automatically calculated from children. Don’t manually set values on parent nodes.
• Color inheritance: If a child node doesn’t specify a fill, it inherits from its parent.
• Center space: Use innerRadius to control the size of the empty center. Larger values create more space for labels.
• Text visibility: Text only appears if there’s sufficient space in the sector. Adjust fontSize in textOptions for better visibility.
• Tooltip event type: SunburstChart only supports 'item' tooltip event type.