Candlestick / OHLC Chart

Prices from a walk that drifts up

Each candle opens where the last one closed and steps by a random amount scaled by its own volatility. The random draw is offset by 0.48 rather than 0.5, which gives a slight upward bias over a long series without ever looking deliberate. Near the bounds the step is reflected at half strength, so the walk turns back instead of clipping.

const open = price;const volatility = 1.5 + rand() * 4.5;const step = (rand() - 0.48) * volatility;let close = open + step;if (close < 20)  close = 20 + (20 - close) * 0.5;if (close > 200)  close = 200 - (close - 200) * 0.5;

The axis follows what you can see

The price extent is taken across the visible slice only, then padded by 8% so wicks do not touch the edges. Scrolling therefore rescales the axis, which is what makes a flat stretch readable instead of squashed against a tall spike elsewhere in the history. A degenerate range falls back to half a unit either side.

if (max - min < 1e-6) {  return { min: min - 0.5, max: max + 0.5 };}const pad = (max - min) * 0.08;return { min: min - pad, max: max + pad };

Candles are slots, not pixels

The plot is divided into as many equal slots as there are visible candles, and a body takes 70% of its slot, leaving the rest as the gap. Changing how many candles are visible changes the slot width and every body with it, so the chart stays evenly spaced at any density without a separate width setting.

const plotW = boxRight - boxLeft;const safeCount = visibleCount < 1 ? 1 : visibleCount;const slot = plotW / safeCount;const halfW = (slot * BODY_FRACTION) / 2;

• Visible Candles60
• Bull Color#37D67A
• Bear Color#FF3B6B
• CrosshairOn