Price chart
A React component in Beamline's Trading category.
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 or 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
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 · Connect your agent
More in Trading
- Depth chart: Cumulative bid and ask depth as stepped areas around the mid, with hover readout.
- Funding countdown: Perpetual funding rate with who pays, and a live countdown ring to the next funding.
- Market heatmap: Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles.
- Order book: Asks, spread and bids with cumulative depth bars, grouping, change flashes and keyboard price picking.
- Order ticket: Buy/sell order entry with limit, market and stop types, % of balance, inline validation and a live cost summary.
- Positions table: Open positions with live unrealised PnL, liquidation warnings and close actions.
- Price ticker: Symbol, last price with a directional flash, 24h change and stats.
- Ticker tape: A continuously scrolling row of symbols with price, change and mini trend; pauses on hover and focus.
- Trades tape: Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes.
- Watchlist: A selectable, sortable list of markets with mini trends, prices, changes and stars.