CirclePackingHtml

@nivo/circle-packinghierarchyhtmlisomorphic

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.

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
Themeoptional

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'
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
#000000

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