Sunburst HTTP API

POST /charts/sunburst
svghttp api

The Sunburstcomponent is available in the nivo HTTP rendering API. The API generates a SVG and return a path to this SVG which can then be easily embedded.

The api accepts almost the same properties as the regular component, in json, however it's not interactive and you cannot use code in properties (functions).

Please note that the demo API server is installed on heroku using a free plan, so it might be unavailable from times to times.

Click the generate button in order to generate the chart.
You can customize settings by using dedicated controls.
generate
Response n/a
no response available
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
px

Chart width.

numberrequired
px

Chart height.

objectoptional
px
px
px
px

Chart margin.

Style
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Categorical: Nivo

Define chart's colors.

'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
No modifier.

Defines how to compute child nodes color.

numberoptionaldefault:1
px

Node border width.

string | object | Functionoptionaldefault:'white'
inheritthemecustom
white

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.

supportsvgapi
Interactivity
booleanoptionaldefault: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'

Motion config for react-spring, either a preset or a custom configuration.

supportsvgapi
stringoptionaldefault:'innerRadius'

Define how transitions behave.

supportsvgapi