# Market heatmap

A React component in [Beamline](https://beamline.io/)'s [Trading](https://beamline.io/components/trading) category. Live demo: https://beamline.io/components/market-heatmap

Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles.

## Use it for

- Market overview: what moved and how big it is.

## Not for

- Exact comparisons → [bar-list](https://beamline.io/components/bar-list) or [data-grid](https://beamline.io/components/data-grid).

## Anatomy

- group labels
- tile (symbol; ▲/▼ and signed change when the tile is big enough)
- hover card
- legend
- List toggle and list view: the same markets as rows (symbol, name, change, weight), largest first — the equivalent of tiles too small to tap

## Variants

- **saturateAt**: fraction

## States

- up
- down
- no data (hatched)
- list (the List toggle, or `view="list"`): rows of at least 32px replace the map

## Keyboard

- Every tile is a button with a spoken direction and change; focus shows the hover card.
- List is a toggle button before the legend; in list view each row is a button when onSelect is given

## Motion

Hover brightens; no movement.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `{ symbol, name?, group?, weight, change }[]` | — |  |
| `saturateAt` | `number` | `0.05` |  |
| `height` | `number` | `420` |  |
| `onSelect` | `(symbol) => void` | — |  |
| `legend` | `boolean` | `true` | Colour scale, no-data key and the List toggle under the map. |
| `weightLabel` | `string` | `"Market cap"` | What tile area means, in the hover card and legend. |
| `view / defaultView / onViewChange` | `"map" \| "list"` | `"map"` | Map or the same markets as full-size rows (for phones, where small tiles are hard to tap). |
| `style / ref` | `CSSProperties / native Ref` | — |  |
| `classNames` | `MarketHeatmapClassNames` | — |  |

## Dependencies

`d3-hierarchy`

## Import

```tsx
import { MarketHeatmap } from "@/components/market-heatmap/market-heatmap";
```

## Get it

Market heatmap is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Trading

- [Depth chart](https://beamline.io/components/depth-chart): Cumulative bid and ask depth as stepped areas around the mid, with hover readout.
- [Funding countdown](https://beamline.io/components/funding-countdown): Perpetual funding rate with who pays, and a live countdown ring to the next funding.
- [Order book](https://beamline.io/components/order-book): Asks, spread and bids with cumulative depth bars, grouping, change flashes and keyboard price picking.
- [Order ticket](https://beamline.io/components/order-ticket): Buy/sell order entry with limit, market and stop types, % of balance, inline validation and a live cost summary.
- [Positions table](https://beamline.io/components/positions-table): Open positions with live unrealised PnL, liquidation warnings and close actions.
- [Price chart](https://beamline.io/components/price-chart): Candles, line or area price chart with volume, OHLC legend and reference lines, built for live ticks.
- [Price ticker](https://beamline.io/components/price-ticker): Symbol, last price with a directional flash, 24h change and stats.
- [Ticker tape](https://beamline.io/components/ticker-tape): A continuously scrolling row of symbols with price, change and mini trend; pauses on hover and focus.
- [Trades tape](https://beamline.io/components/trades-tape): Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes.
- [Watchlist](https://beamline.io/components/watchlist): A selectable, sortable list of markets with mini trends, prices, changes and stars.