Skip to main content

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.

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

​
data
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.
​
width
number | string
The width of chart container. Can be a number or a percent string like “100%”.
​
height
number | string
The height of chart container. Can be a number or a percent string like “100%”.
​
dataKey
string
default:"'value'"
Decides how to extract value from the data.
​
nameKey
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.
​
cx
number
The x-coordinate of center in pixels. If undefined, it will be set to half of the chart width.
​
cy
number
The y-coordinate of center in pixels. If undefined, it will be set to half of the chart height.
​
innerRadius
number
default:"50"
The radius of the inner circle at the center of the chart.
​
outerRadius
number
Outermost edge of the chart. Defaults to the max possible radius for a circle inscribed in the chart container.
​
startAngle
number
default:"0"
Angle in degrees from which the chart should start.
​
endAngle
number
default:"360"
Angle, in degrees, at which the chart should end.
​
padding
number
default:"2"
Distance between sectors.
​
ringPadding
number
default:"2"
Padding between each hierarchical level.
​
fill
string
default:"'#333'"
The fill color of sunburst sectors.
​
stroke
string
default:"'#FFF'"
The stroke color of sunburst sectors.
​
textOptions
object
An object with svg text options to control the appearance of the chart labels.
​
responsive
boolean
default:"false"
If true, then it will listen to container size changes and adapt the SVG chart accordingly.
​
onMouseEnter
function
The customized event handler of mouseenter on a sector.
​
onMouseLeave
function
The customized event handler of mouseleave on a sector.
​
onClick
function
The customized event handler of click on a sector.
​
className
string
CSS class name for the chart container.
​
style
CSSProperties
Inline CSS styles for the chart container.
​
id
string
The unique id of chart.
​
throttleDelay
number | 'raf'
default:"'raf'"
Decides the time interval to throttle events.