All charts

treemap/*

Treemap

Hierarchical area-encoded breakdowns — portfolio / sector / market-cap composition.

1 variant
@vireya/ui/charts/treemap/sectors

S&P-style sector treemap: hierarchical (sector → ticker), area encodes market cap, custom content fn renders rect + label per leaf.

client
TechnologyFinancialsHealth CareEnergyConsumer

Understanding Treemap charts

Treemaps tile a rectangle into nested boxes whose area encodes value, packing a hierarchy and its magnitudes into a dense, space-filling view. They shine when you have many items in a few groups and want both the big picture and the long tail in one frame.

Vireya's sectors variant renders a market-cap-style breakdown with a custom content function drawing each leaf rectangle and label.

When to use

  • Hierarchical part-to-whole with many leaves (portfolio, market cap, disk usage).
  • Showing both large and small contributors in a fixed space.
  • A compact alternative to a long sorted bar list.

When to avoid

  • Precise comparison — area is read less accurately than length.
  • Flat data with no hierarchy and few items (use bars).
  • Negative values, which area can't represent.

Best practices

  • Group leaves by their parent and colour by group so the hierarchy reads.
  • Label larger tiles inline; let tooltips carry detail for small ones.
  • Sort tiles so the largest sits top-left.

Accessibility

  • Provide tooltips with exact values since area is approximate.
  • Keep group colours distinct and labels high-contrast.
  • Offer a table fallback for the underlying hierarchy.

Frequently asked questions

When is a treemap better than a bar chart?
When you have a hierarchy with many items and limited space, and you want to see the whole composition at once. Bars are more accurate for direct comparison but get unwieldy with dozens of categories; a treemap stays compact.
Can treemaps show negative numbers?
No. Area encodes magnitude, which can't be negative. For signed data such as gains and losses, use a bar chart or a waterfall instead.