CirclePacking HTTP API

POST /charts/circle_packing
svghtmlcanvashttp api

The CirclePackingcomponent 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

Padding between each circle.

booleanoptionaldefault:false
   

Only render leaf nodes (skip parent nodes).

numberrequired
px

Chart width.

numberrequired
px

Chart height.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvghtmlcanvasapi
objectoptional
px
px
px
px

Chart margin.

Style
Themeoptional

Define style for common elements such as labels, axes…

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

Define chart's colors.

'id' | 'depth'optionaldefault:'depth'

Define the property to use to assign a color to circles.

booleanoptionaldefault:false
   

Inherit color from parent node starting from 2nd level.

string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",0.3]]}
inheritthemecustom
inherited property
color
modifiers
darker

Defines how to compute child nodes color, only used when inheritColorFromParent is enabled.

numberoptionaldefault:0
px

Width of circle border.

string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",0.3]]}
inheritthemecustom
inherited property
color
modifiers
darker

Method to compute border color.

object[]optional

Define patterns and gradients.

supportsvghtmlcanvasapi
object[]optional

Define rules to apply patterns and gradients

supportsvghtmlcanvasapi
Componentoptional

Custom circle component.

supportsvghtmlcanvasapi
Labels
booleanoptionaldefault:false
   

Enable/disable labels.

string | Functionoptionaldefault:'id'
id

Label accessor.

(label) => booleanoptional

Filter labels using custom conditions.

numberoptionaldefault:8
px

Skip label rendering if node radius is lower than given value, 0 to disable.

string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",1.6]]}
inheritthemecustom
inherited property
color
modifiers
darker

Method to compute label text color.

Componentoptional

Custom label component.

Interactivity
booleanoptionaldefault:true

Enable/disable interactivity.

supportsvghtmlcanvasapi
(node, event) => voidoptional

onMouseEnter handler, it receives target node data and mouse event.

supportsvghtmlcanvasapi
(node, event) => voidoptional

onMouseMove handler, it receives target node data and mouse event.

supportsvghtmlcanvasapi
(node, event) => voidoptional

onMouseLeave handler, it receives target node data and mouse event.

supportsvghtmlcanvasapi
(node, event) => voidoptional

onClick handler, it receives target node data and mouse event.

supportsvghtmlcanvasapi
string | nulloptional

Zoom on a specific node.

supportsvghtmlcanvasapi
Motion
booleanoptionaldefault:true

Enable/disable transitions.

supportsvghtmlcanvasapi
string | objectoptionaldefault:'gentle'

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

supportsvghtmlcanvasapi