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
Themeoptional

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