# Price chart

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

Candles, line or area price chart with volume, OHLC legend and reference lines, built for live ticks.

## Use it for

- The main price view of a market: candles for traders, line/area for a simpler asset page.
- Anything that updates several times a second — canvas keeps it cheap.

## Not for

- Business metrics over time → [line-chart](https://beamline.io/components/line-chart) or [area-chart](https://beamline.io/components/area-chart).
- A tiny inline trend → sparkline.

## Anatomy

- root
- canvas (price pane, volume histogram)
- legend (symbol, O H L C, change, volume)
- price lines
- right price axis
- time axis

## Variants

- **type**: candles, line, area
- **volume**: on, off

## States

- loading-initial (no candles: faint baseline, spinner and "Loading BTC-USD…", elapsed seconds after 2s)
- live
- updating (candles kept; "Updating…" chip at the top end of the plot, never a veil)
- stale (caller's words in a chip with a clock glyph, e.g. "Stale · 12s")
- error (caller's words in a chip with an alert glyph; last candles kept)
- empty ("No price data")
- hover (legend follows the crosshair; crosshair labels on the tooltip colours)

## Keyboard

- The canvas is presentational; the last price is exposed as text for screen readers. Products add interval and type controls as real buttons.

## Motion

No animation: new ticks replace the last candle in place. Colours re-resolve instantly on theme or accent change.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `candles` (required) | `Candle[]` | — | Oldest first, time in UTC seconds. Pass a new array per tick; untouched candles keep identity. |
| `type` | `"candles" \| "line" \| "area"` | `candles` |  |
| `tick` | `number` | `0.01` | Price increment; sets axis and legend precision. |
| `volume` | `boolean` | `true` |  |
| `priceLines` | `{ price, label, tone?, dashed? }[]` | — | Entry, liquidation, orders, alerts. |
| `legend` | `boolean` | `true` |  |
| `symbol` | `string` | — |  |
| `height` | `number \| "fill"` | `360` |  |
| `onCrosshairMove` | `(candle: Candle \| null) => void` | — |  |
| `loading` | `boolean` | — |  |

## Dependencies

`lightweight-charts`

## Import

```tsx
import { PriceChart } from "@/components/price-chart/price-chart";
```

## Get it

Price chart 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.
- [Market heatmap](https://beamline.io/components/market-heatmap): Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles.
- [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 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.