Sunburst chart component for hierarchical data
SunburstChart is based on the SunburstChart recharts component . It displays hierarchical data as concentric rings, similar to a treemap plotted in polar coordinates:
SunburstChart expects an array of objects. Each object must have a name and color property. Leaf nodes must have a value property. Parent nodes can have a children array:
You can reference colors from theme the same way as in other components, for example, blue , red.5 , orange.7 , etc. Any valid CSS color value is also accepted. Children inherit the color of their parent node.
Use strokeColor to change the color of the stroke around each sector:
Use size prop to control the width and height of the chart:
Use gap prop to control the spacing between sectors and rings:
Set withLabels to display value labels inside each sector. It is recommended to increase size to give labels enough space:
To disable the tooltip, set withTooltip={false} :