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 HTML component
to get started.
The responsive alternative of this component is ResponsiveCirclePackingHtml
.
It also offers other implementations, see CirclePacking
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.
0
Padding between each circle.
false
Only 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.
false
Inherit color from parent node starting from 2nd level.
Defines how to compute child nodes color, only used when inheritColorFromParent is enabled.
0
Width of circle border.
Method to compute border color.
Define patterns and gradients.
Define rules to apply patterns and gradients
Custom circle component.
false
Enable/disable labels.
'id'
Label accessor.
Filter labels using custom conditions.
8
Skip label rendering if node radius is lower than given value, 0 to disable.
#000000
Method to compute label text color.
Custom label component.
true
Enable/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.
true
Enable/disable transitions.
'gentle'
Motion config for react-spring, either a preset or a custom configuration.