Hierarchies and flows

Treemaps, sunbursts, funnels and Sankey diagrams show how a whole breaks into parts, or how a quantity flows from one step to the next.

LLMs

Treemap

Give a Treemap nested data and a dataKey, and pass the theme's series colors as colorPanel to fill each top-level group.

Custom content

Pass a component as content to draw each Treemap node yourself, here a colored group with its name and rank.

Padding and gaps

Set nodeInset and nodeGap on a Treemap to pad each group and space its children apart.

Nested

Set type to nest so clicking a group zooms into its children, with a breadcrumb below the Treemap to step back up.

Bundle size treemap

A nested Treemap of a code library's packages and classes, sized by bytes, with totals under it and a click to drill in.

Sunburst

A SunburstChart drawn over half a circle with startAngle and endAngle, each top folder colored by the fill on its row.

Theme colors

Give each first ring row of a SunburstChart the next theme series color as fill, and its descendants inherit it.

Bundle size sunburst

The same package hierarchy as a SunburstChart with a wide ring, hidden value labels and a tooltip that reads sizes in KB.

Funnel

A Funnel inside a FunnelChart, colored by the fill on each stage, with a LabelList naming the stages on the right.

Active shape

Pass activeShape to a reversed Funnel to redraw the hovered stage as an outlined Trapezoid labeled with its dimensions.

Funnel label positions

Every position a LabelList accepts on a Funnel, from center and insideTopLeft to a custom point.

Sankey custom node

Pass a component as node to a Sankey to draw each step as a bar with its name and total, flipping the text at the right edge.