> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```jsx theme={null}
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

```jsx theme={null}
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

<CodeGroup>
  ```jsx Large center theme={null}
  <SunburstChart
    width={500}
    height={500}
    data={data}
    dataKey="value"
    innerRadius={100}
    outerRadius={200}
    fill="#8884d8"
  />
  ```

  ```jsx Thin rings theme={null}
  <SunburstChart
    width={500}
    height={500}
    data={data}
    dataKey="value"
    innerRadius={50}
    outerRadius={250}
    fill="#8884d8"
  />
  ```
</CodeGroup>

## Ring padding

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

<Note>
  * `padding`: Space between sectors within the same level
  * `ringPadding`: Space between hierarchical levels
</Note>

## Custom angles

<CodeGroup>
  ```jsx Full circle (default) theme={null}
  <SunburstChart
    width={500}
    height={500}
    data={data}
    dataKey="value"
    startAngle={0}
    endAngle={360}
    fill="#8884d8"
  />
  ```

  ```jsx Semi-circle theme={null}
  <SunburstChart
    width={500}
    height={300}
    data={data}
    dataKey="value"
    startAngle={180}
    endAngle={0}
    fill="#8884d8"
  />
  ```

  ```jsx Three-quarter circle theme={null}
  <SunburstChart
    width={500}
    height={500}
    data={data}
    dataKey="value"
    startAngle={0}
    endAngle={270}
    fill="#8884d8"
  />
  ```
</CodeGroup>

## Custom center position

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

<Note>
  `cx` and `cy` can be numbers (pixels) or percentages. If undefined, the chart centers automatically.
</Note>

## Custom text options

```jsx theme={null}
<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

```jsx theme={null}
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

```jsx theme={null}
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

```jsx theme={null}
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"
/>
```

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

## Responsive sunburst

```jsx theme={null}
<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.