Ajax UI
Components/Candlestick Chart

Candlestick Chart

Dependency-free OHLC candles with bullish/bearish coloring, wicks, gridlines and axis labels - the same lightweight-SVG philosophy as Chart.

112108.5105101.59809:00 · O 102 H 105 L 100 C 10410:00 · O 104 H 108 L 103 C 10711:00 · O 107 H 109 L 104 C 10512:00 · O 105 H 106 L 101 C 10213:00 · O 102 H 104 L 99 C 10014:00 · O 100 H 103 L 98 C 10315:00 · O 103 H 107 L 102 C 10616:00 · O 106 H 110 L 105 C 10917:00 · O 109 H 111 L 106 C 10718:00 · O 107 H 112 L 107 C 11109:0011:0013:0015:0017:00

Installation

npx @ajax-ui/cli add candlestick-chart

Props

  • data - { label, open, high, low, close } per candle, oldest first.
  • upColor / downColor - bullish/bearish fills (default emerald/red).
  • showGrid / showAxis (default true) - dashed gridlines, compact y-labels, thinned x-labels.
  • height (default 240) - width is fluid via viewBox.
  • Each candle body carries a <title> with its OHLC values - native hover tooltip and screen-reader text.
  • Doji candles (open = close) keep a visible 1px body.

When to reach for a library

This is a presentation chart: static series, no zoom/pan/crosshair. For a live trading terminal with thousands of candles and streaming updates, layer a dedicated charting engine and keep this for summaries, reports, and cards.