▚CandlestickChartcustom
OHLC candles with wicks, up/down colors and index labels
$ termino candlestick — ohlc stream
▄│
▄▀█▄
▄▀ │█▄ ▄
▄█▀ ▀█▄│▄│ ▄ ▄▄▄▄ ▄ ▄
▄█▀ ▀▀█▀█▄ ▄▄▄▄ ██▀██▄▄ ▄▄
▄█│ │▀▀ ▀▄▀▀██▄▄▄▄ ▄▀▀ ▀▀███ ▀
▀▀ ▀▀ ▀▀▀│▀█ ▄█▀ │▀▀
▀ ██▀
│
0 4 8 12 16 20 24 28 32
▼ o 98.5 h 100.8 l 94.5 c 97.0
##API
One candle per data point at the column group center. Bodies are `█` with `▀/▄` edges at half-pixel rows, wicks are `│`; body wins over wick on overlap. Green when close ≥ open, red otherwise. Index labels every few candles on the bottom row.
properties
| prop | type | default | description |
|---|---|---|---|
| data | { open, high, low, close }[] | - | OHLC series |
| width / height | number | 40 / 10 | Chart area |
| up / down | string | "#9ece6a" / "#f7768e" | Bullish / bearish body colors |
| wick | string | "#7a81a8" | Wick color |
| showLabels | boolean | true | Index labels row |
##Keymap
—Display only
##Notes
- ▸Scale is computed from high/low across the whole series — candles stay true.
- ▸Feed it a rolling window (slice(-n)) to build a live ticker.
##Source
Real implementation — this is the code that runs in your terminal.
1import { createElement as h, useMemo } from "react";2import { Canvas } from "./canvas";3import { renderCandles, type Candle } from "./chart";45export interface CandlestickChartProps {6 data: Candle[];7 width?: number;8 height?: number;9 up?: string;10 down?: string;11 wick?: string;12 showLabels?: boolean;13}1415export function CandlestickChart({16 data,17 width = 40,18 height = 10,19 up,20 down,21 wick,22 showLabels,23}: Readonly<CandlestickChartProps>) {24 const rows = useMemo(25 () => renderCandles(data, width, height, { up, down, wick, showLabels }),26 [data, width, height, up, down, wick, showLabels],27 );28 return h("box", { flexDirection: "column", gap: 0, width }, h(Canvas, { rows, width }));29}30