Sunburst

@nivo/sunbursthierarchyradialsvgisomorphic

The responsive alternative of this component is ResponsiveSunburst.

Actions Logs
Start interacting with the chart to log actions
Base
objectrequired
Chart data, which should be immutable.
string | Functionoptionaldefault:'id'
Id accessor.
string | Functionoptionaldefault:'value'
Value accessor
string | (value: number) => string | numberoptional
open editor
Optional formatter for values.
numberoptionaldefault:0
px
Round node shape.
numberrequired
Chart width.
numberrequired
Chart height.
objectoptional
px
px
px
px
Chart margin.
Style
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"nivo"}
nivo
Defines how to compute node color.
'id' | 'depth'optionaldefault:'id'
Define the property to use to assign a color to arcs.
booleanoptionaldefault:true
   Inherit color from parent node starting from 2nd level.
string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
brighter
Defines how to compute child nodes color.
numberoptionaldefault:1
px
Node border width.
string | object | Functionoptionaldefault:'white'
inheritthemecustom
theme property
background
Defines how to compute arcs color.
object[]optional
Define patterns and gradients.
object[]optional
Define rules to apply patterns and gradients
booleanoptional
   Patterns.
supportsvgapi
Arc labels
booleanoptionaldefault:false
   Enable/disable arc labels.
string | Functionoptionaldefault:'formattedValue'
formattedValue
Defines how to get label text, can be a string (used to access current node data property) or a function which will receive the actual node data.
numberoptionaldefault:0.5
Define the radius to use to determine the label position, starting from inner radius, this is expressed as a ratio.
numberoptionaldefault:0
°
Skip label if corresponding arc's angle is lower than provided value.
string | object | Functionoptionaldefault:{"theme":"labels.text.fill"}
inheritthemecustom
inherited property
color
modifiers
darker
Defines how to compute arc label text color.
Customization
Array<string | Function>optionaldefault:['arcs', 'arcLabels']
Defines the order of layers and add custom layers.
Interactivity
{boolean}optionaldefault:true
   Enable/disable interactivity.
supportsvgapi
Functionoptional
Tooltip custom component
supportsvgapi
booleanoptional
   Showcase custom tooltip component.
supportsvgapi
Functionoptional
onClick handler
supportsvgapi
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
supportsvgapi
string | objectoptionaldefault:'gentle'
gentle
Motion config for react-spring, either a preset or a custom configuration.
supportsvgapi
stringoptionaldefault:'innerRadius'
innerRadius
Define how transitions behave.
supportsvgapi