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.
Chart data, which should be immutable.
'id'Id accessor.
'value'Value accessor
Optional formatter for values.
0Padding between each circle.
falseOnly render leaf nodes (skip parent nodes).
Chart width.
Chart height.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
Define style for common elements such as labels, axes…
Define chart's colors.
'depth'Define the property to use to assign a color to circles.
falseInherit color from parent node starting from 2nd level.
Defines how to compute child nodes color, only used when inheritColorFromParent is enabled.
0Width of circle border.
Method to compute border color.
Define patterns and gradients.
Define rules to apply patterns and gradients
Custom circle component.
falseEnable/disable labels.
'id'Label accessor.
Filter labels using custom conditions.
8Skip label rendering if node radius is lower than given value, 0 to disable.
Method to compute label text color.
Custom label component.
trueEnable/disable interactivity.
onMouseEnter handler, it receives target node data and mouse event.
onMouseMove handler, it receives target node data and mouse event.
onMouseLeave handler, it receives target node data and mouse event.
onClick handler, it receives target node data and mouse event.
Zoom on a specific node.
trueEnable/disable transitions.
'gentle'Motion config for react-spring, either a preset or a custom configuration.