Trading

The trading chart draws price bars as candles, hollow candles, bars, a line, an area or a baseline, or as Heikin-Ashi, Renko and line break, at any interval the bars roll up to. Fifty-nine indicators - moving averages, bands and channels on the price, RSI, MACD, stochastics and volume studies in panes beneath - each with its settings; and drawing tools anchored to time and price: trend lines, channels, Fibonacci retracements, ranges, notes and more, kept as JSON.

Zoom with the wheel or a pinch, drag back in time, compare other instruments in per cent, and replay the past a bar at a time with the indicators seeing only what is shown. Live, each tick goes into the forming bar with a countdown to the next, and an order book shows its ladder and depth beside the price. Save the chart as PNG or SVG; the same numbers are worked out on a server by the Node module.

Two years of a share

Daily bars for an invented share, with a 50-day average, Bollinger Bands, volume, RSI, a trend line along the recent lows and a Fibonacci retracement of the last big move. Add indicators and drawings from the toolbar, compare the share with an index, or replay the last three months as they happened.

Keyboard: with the chart focused, the arrow keys move a bar at a time (Shift for ten), + and - zoom, Home and End go to the first and the latest bar, and Delete removes the chosen drawing.

// Node 18 or later, from the Gold package: every instrument with an RSI under 30 above its 200-day average.
import { readBars, computeIndicator } from './dist/node/bmx-trading-chart.mjs';

for (const [symbol, csv] of files) {
  const daily = readBars(csv);
  const [rsi] = computeIndicator('rsi', daily, { length: 14 });
  const [sma] = computeIndicator('sma', daily, { length: 200 });
  const i = daily.length - 1;
  if (rsi[i] < 30 && daily[i].close > sma[i]) console.log(symbol);
}

A live market with its order book

An hour of one-minute bars, then a price every half second into the bar that is forming, as a market feed would send them, with the order book beside the chart changing with every tick. Choose a price in the book to see what the page is told; the feed rests while this part of the page is out of view.

Pause the feed

Sizes on the price axis

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-trading-chart id="tr-live" label="Live price" symbol="NWRL" interval="1m" locale="en-GB" time-zone="Europe/London" show-order-book style="inline-size: 100%; --bmx-trading-chart-height: 30rem"></bmx-trading-chart>

<script>
  const tradingChart = document.getElementById('tr-live');
  tradingChart.data = [ /* your data */ ];
</script>