Market Heatmap

A squarified treemap sized by market cap and coloured on a diverging change ramp — the market map.

Crypto market map

@spectrumui/market-heatmap

Crypto market map

Top 12 · 24h change · area by market cap

Weighted +1.70%

−6%+6%

S&P 500 sectors

Session change · area by index weight

Weighted +0.50%

−4%+4%

Manual installation

Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:

chart-engine.tsxcomponents/spectrumui/charts/chart-engine.tsx
market-heatmap.tsxcomponents/spectrumui/charts/market-heatmap.tsx

There is nothing to install — this chart draws its own SVG and imports only @/lib/utils.

Usage

import { MarketHeatmap } from '@/components/spectrumui/charts/market-heatmap';

<MarketHeatmap data={constituents} cap={6} />

Tiles too small to carry a ticker are folded into one Other tile, so it adapts to any width.
cap is the percentage change that saturates the colour ramp.

Props

Prop	Type	Default	Description
`data`	`TreemapInput[]`	`CRYPTO_MAP`	Each entry needs a label, a weight for area, and a change for colour.
`cap`	`number`	`6`	Percentage change that saturates the diverging ramp.
`title`	`string`	-	Header title.
`subtitle`	`string`	-	Line under the title.
`height`	`number`	-	Plot height in pixels. The header sits above it, so the card is taller than this.
`status`	`'ready' \| 'loading' \| 'empty' \| 'error'`	`'ready'`	Which state to render. All four reserve the same frame height, so nothing shifts when data lands.
`onRetry`	`() => void`	-	Called by the retry button in the error state. Omit it and no button is shown.
`className`	`string`	-	Merged onto the root element.