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 for non-responsive component.
Chart height for non-responsive component.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.