Is your feature request related to a problem? Please describe.
Treemap currently renders child nodes directly on top of parent geometry and sibling nodes, making it difficult to see the association between them without an excellent colour palette. This makes dense hierarchical data harder to read and limits visual separation compared to other charts that expose spacing controls (e.g., paddingAngle in Pie, nodePadding in Sankey, barGap/barCategoryGap in bar-based charts).
Describe the solution you'd like
Add Treemap spacing props:
nodePadding?: number
Insets the layout area used for a node’s children.nodeGap?: number
Adds spacing between sibling nodes at the same depth.
Expected behavior:
- Defaults preserve current rendering (
0 for both).
- Works in both
type="flat" and type="nest".
- Included in docs/story examples and typed API.
Describe alternatives you've considered
- Using custom rendering to visually fake spacing.
Drawback: does not affect actual layout geometry/hit areas. It also doesn't work so well since it isn't possible (or practical) to simulate the whole rendering pipeline to get the correct size of gaps and padding on each node at all depths.
Example attached of the custom junk I managed to produce. You can clearly see the difference in gap between different levels.
Additional context
I do actually have a branch for this ready to go, so I will open a PR and link it to this issue.
Is your feature request related to a problem? Please describe.
Treemap currently renders child nodes directly on top of parent geometry and sibling nodes, making it difficult to see the association between them without an excellent colour palette. This makes dense hierarchical data harder to read and limits visual separation compared to other charts that expose spacing controls (e.g.,
paddingAnglein Pie,nodePaddingin Sankey,barGap/barCategoryGapin bar-based charts).Describe the solution you'd like
Add Treemap spacing props:
nodePadding?: numberInsets the layout area used for a node’s children.
nodeGap?: numberAdds spacing between sibling nodes at the same depth.
Expected behavior:
0for both).type="flat"andtype="nest".Describe alternatives you've considered
Drawback: does not affect actual layout geometry/hit areas. It also doesn't work so well since it isn't possible (or practical) to simulate the whole rendering pipeline to get the correct size of gaps and padding on each node at all depths.
Example attached of the custom junk I managed to produce. You can clearly see the difference in gap between different levels.
Additional context
I do actually have a branch for this ready to go, so I will open a PR and link it to this issue.