CirclePackingCanvas

@nivo/circle-packinghierarchycanvas

A variation around the CirclePacking component.

Well suited for large data sets as it does not impact DOM tree depth, however you lose the isomorphic ability and transitions.

The responsive alternative of this component is ResponsiveCirclePackingCanvas. It also offers other implementations, see CirclePacking and CirclePackingHtml.

800 nodes
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
Padding between each circle.
booleanoptionaldefault:false
   Only render leaf nodes (skip parent nodes).
numberrequired
Chart width.
numberrequired
Chart height.
objectoptional
px
px
px
px
Chart margin.
numberoptionaldefault:'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
supportsvghtmlcanvas
Style
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"nivo"}
spectral
Define how to compute node color.
'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
brighter
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.
supportsvghtmlcanvas
object[]optional
Define rules to apply patterns and gradients
supportsvghtmlcanvas
optional
Custom circle component.
Labels
booleanoptionaldefault:false
   Enable/disable labels.
string | Functionoptionaldefault:'id'
value
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.
optional
Custom label component.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
(node, event) => voidoptional
onMouseEnter handler, it receives target node data and mouse event.
supportsvghtmlcanvas
(node, event) => voidoptional
onMouseMove handler, it receives target node data and mouse event.
(node, event) => voidoptional
onMouseLeave handler, it receives target node data and mouse event.
supportsvghtmlcanvas
(node, event) => voidoptional
onClick handler, it receives target node data and mouse event.
string | nulloptional
Zoom on a specific node.
Motion
booleanoptionaldefault:true
Enable/disable transitions.
supportsvghtmlcanvas
string | objectoptionaldefault:'gentle'
Motion config for react-spring, either a preset or a custom configuration.
supportsvghtmlcanvas