Tiles sized by value and laid out squarified, settling in largest first with labels where they fit; hovering shows the value and share — soft gradient fills that fade into the floor.

Outlined Treemap

Chart

Tiles sized by value and laid out squarified, settling in largest first with labels where they fit; hovering shows the value and share — hairline outlines over a faint tint.

React · Tailwind CSS · Motion

Browse

Home All components 213

Collections

Marketing UI 107 App UI 94 AI 16 Charts 45 Backgrounds 2 Text 43

Charts

Resources

Docs & install Scalar Design

Charts

Treemap

A whole split into tiles by size.

2 results

All Marketing UI App UI AI Charts Backgrounds Text

Bar chart Stacked bar Horizontal bar Line chart Area chart Spark chart Pie chart Donut & semi-donut Radial chart Hexagon chart Heatmap Funnel chart Category bar Segmented progress Scatter & bubble Combo chart Waterfall Diverging bar Candlestick Treemap Waffle chart Sankey

2 results

Gradient Treemap

Chart

Tiles sized by value and laid out squarified, settling in largest first with labels where they fit; hovering shows the value and share — soft gradient fills that fade into the floor.

Outlined Treemap

Chart

Tiles sized by value and laid out squarified, settling in largest first with labels where they fit; hovering shows the value and share — hairline outlines over a faint tint.

All Marketing UI App UI AI Charts Backgrounds Text