A tree map component using d3-hierarchy.treemap, see this demo.
You can fully customize it using nodeComponent property to define
your own node component, if you wish to do so you should have a look at
native SVG node component
for available properties.
The responsive alternative of this component is ResponsiveTreeMap,
it also offers other implementations, see
TreeMapHtml and
TreeMapCanvas.
The TreeMap component is also available in the @nivo/api,
see sample
or try it using the API client.
The hierarchical data object.
'id'The key or function to use to retrieve nodes identity.
'value'The key or function to use to retrieve nodes value.
Value format supporting d3-format notation, this formatted value will then be used for labels and tooltips.
'squarify'Strategy used to compute nodes.
falseOnly render leaf nodes (no parent).
0Padding between parent and child node.
0Padding between parent and child node.
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.
0.33Node opacity (0~1).
1Control node border width.
Method to compute border color.
Define patterns and gradients.
Define rules to apply patterns and gradients
trueEnable/disable labels.
Label accessor.
Skip label rendering if node minimal side length is lower than given value, 0 to disable.
trueOrient labels according to max node width/height.
Method to compute label text color.
trueEnable/disable labels.
Parent label accessor.
20Parent label size.
'top'Parent label position.
6Parent label padding.
Method to compute parent label text color.
trueEnable/disable interactivity.
onMouseEnter handler.
onMouseMove handler.
onMouseLeave handler.
onClick handler.
Override the default node component.
'nodes']Define layers, please use the appropriate variant for custom layers.
Main element role attribute.
Main element aria-label.
Main element aria-labelledby.
Main element aria-describedby.
trueEnable/disable transitions.
'gentle'Motion config for react-spring, either a preset or a custom configuration.