React chart example
Treemap
Show how categories and subcategories contribute to a whole using nested rectangles sized by value.
What is a treemap?
A treemap divides a rectangular space into tiles whose areas represent values. Related tiles sit within larger groups, so readers can see both the largest contributions and the structure of a hierarchy.
When to use it
Use a treemap to explore cost breakdowns, storage consumption or a product portfolio with many positive contributions. It is useful for spotting dominant groups in limited space. Use bars when readers need precise comparisons between similarly sized values; use a stacked column chart to compare composition across periods.
Design tips
Use a consistent measure and unit for every tile. Negative values cannot be represented by area.
Use colour to identify groups and keep it consistent as filters change.
Label only tiles large enough to read. Keep exact values available on hover instead of squeezing labels into small cells.
Build this chart in React
Build this chart
This example uses a custom Graphy geom plugin with a React renderer. Register the plugin with createGraphyKit to use its typed builder and provider together. This example uses a fixed theme.
Compare with
Use when totals and components need a common straight baseline.
Use for a small, flat set of shares without hierarchy.
Graphy Chart SDK
Add Graphy’s treemaps to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.