Bubble chart using circle packing with zooming ability.
You can fully customize it using nodeComponent property
to define your own node component, if you wish to do so you should
have a look at
the native HTML node component
for available properties.
The responsive alternative of this component is ResponsiveBubbleHtml.
It also offers various implementations,
see Bubble and BubbleCanvas.
You can also see more example usages in
the storybook.
Actions Logs
Start interacting with the chart to log actions
Base
objectrequired
The hierarchical data object.
string | Functionoptionaldefault:'id'
Define id accessor.
string | Functionoptionaldefault:'value'
Define value accessor.
numberrequired
Chart width.
numberrequired
Chart height.
numberoptionaldefault:'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
supportsvghtmlcanvasapi
booleanoptionaldefault:false
Only render leaf nodes (skip parent nodes).
objectoptional
px
px
px
px
Chart margin.
numberoptionaldefault:1
px
Padding between each circle.
Style
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"nivo"}