Hierarchical CirclePacking chart with zooming ability.
You can fully customize it using the
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
It also offers other implementations, see CirclePackingHtml
You can also see more example usages in storybook.
Start interacting with the chart to log actions
Define style for common elements such as labels, axes… Define how to compute node color.
Inherit color from parent node starting from 2nd level.
modifiersDefines how to compute child nodes color, only used when inheritColorFromParent is enabled.
modifiersMethod to compute border color.
Define patterns and gradients. Define rules to apply patterns and gradients
Custom circle component.
Filter labels using custom conditions. Skip label rendering if node radius is lower than given value, 0 to disable.
modifiersMethod to compute label text color.
Custom label component.
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.
Motion config for react-spring, either a preset or a custom configuration.