> ## 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.

# SunburstChart

> API reference for the SunburstChart component

The sunburst is a hierarchical chart, similar to a Treemap, plotted in polar coordinates. Sunburst charts effectively convey the hierarchical relationships and proportions within each level.

```tsx theme={null}
import { SunburstChart } from 'recharts';

const data = {
  name: 'root',
  children: [
    {
      name: 'A',
      value: 15,
      fill: '#8884d8',
      children: [
        { name: 'A1', value: 4, fill: '#83a6ed' },
        { name: 'A2', value: 5, fill: '#8dd1e1' },
      ],
    },
    {
      name: 'B',
      value: 8,
      fill: '#82ca9d',
    },
  ],
};

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

## Props

<ParamField path="data" type="object" required>
  The source data. Each element should be an object. Use the `dataKey` prop to specify which properties to use. If the `children` property is present on an element, it will be treated as a nested sunburst.
</ParamField>

<ParamField path="width" type="number | string">
  The width of chart container. Can be a number or a percent string like "100%".
</ParamField>

<ParamField path="height" type="number | string">
  The height of chart container. Can be a number or a percent string like "100%".
</ParamField>

<ParamField path="dataKey" type="string" default="'value'">
  Decides how to extract value from the data.
</ParamField>

<ParamField path="nameKey" type="string | number | function" default="'name'">
  Name represents each sector in the tooltip. Can be a string key name, number index, or function that receives the data object and returns the name.
</ParamField>

<ParamField path="cx" type="number">
  The x-coordinate of center in pixels. If undefined, it will be set to half of the chart width.
</ParamField>

<ParamField path="cy" type="number">
  The y-coordinate of center in pixels. If undefined, it will be set to half of the chart height.
</ParamField>

<ParamField path="innerRadius" type="number" default="50">
  The radius of the inner circle at the center of the chart.
</ParamField>

<ParamField path="outerRadius" type="number">
  Outermost edge of the chart. Defaults to the max possible radius for a circle inscribed in the chart container.
</ParamField>

<ParamField path="startAngle" type="number" default="0">
  Angle in degrees from which the chart should start.
</ParamField>

<ParamField path="endAngle" type="number" default="360">
  Angle, in degrees, at which the chart should end.
</ParamField>

<ParamField path="padding" type="number" default="2">
  Distance between sectors.
</ParamField>

<ParamField path="ringPadding" type="number" default="2">
  Padding between each hierarchical level.
</ParamField>

<ParamField path="fill" type="string" default="'#333'">
  The fill color of sunburst sectors.
</ParamField>

<ParamField path="stroke" type="string" default="'#FFF'">
  The stroke color of sunburst sectors.
</ParamField>

<ParamField path="textOptions" type="object">
  An object with svg text options to control the appearance of the chart labels.

  <Expandable title="properties">
    <ParamField path="fontWeight" type="string" default="'bold'" />

    <ParamField path="fontSize" type="string" default="'.75rem'" />

    <ParamField path="fill" type="string" default="'black'" />

    <ParamField path="stroke" type="string" default="'#FFF'" />
  </Expandable>
</ParamField>

<ParamField path="responsive" type="boolean" default="false">
  If true, then it will listen to container size changes and adapt the SVG chart accordingly.
</ParamField>

<ParamField path="onMouseEnter" type="function">
  The customized event handler of mouseenter on a sector.
</ParamField>

<ParamField path="onMouseLeave" type="function">
  The customized event handler of mouseleave on a sector.
</ParamField>

<ParamField path="onClick" type="function">
  The customized event handler of click on a sector.
</ParamField>

<ParamField path="className" type="string">
  CSS class name for the chart container.
</ParamField>

<ParamField path="style" type="CSSProperties">
  Inline CSS styles for the chart container.
</ParamField>

<ParamField path="id" type="string">
  The unique id of chart.
</ParamField>

<ParamField path="throttleDelay" type="number | 'raf'" default="'raf'">
  Decides the time interval to throttle events.
</ParamField>