CirclePacking

@nivo/circle-packinghierarchysvgisomorphic

Hierarchical CirclePacking chart with zooming ability.

You can fully customize it using the circleComponent property to define your own, if you wish to do so you should have a look at the default SVG component to get started.

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

You can also see more example usages in storybook.

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"}
nivo
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'
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.
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'
gentle
Motion config for react-spring, either a preset or a custom configuration.
supportsvghtmlcanvas