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.

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.

Show properties

fontWeight · string · default: "'bold'"

fontSize · string · default: "'.75rem'"

fill · string · default: "'black'"

stroke · string · default: "'#FFF'"

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.