chartZ (@zuttora/charts)

Zuttora's own charting package: candlesticks on an HTML canvas, square corners, no runtime dependencies. The full design is in Zuttora's docs/charting.md (section 6).

import { createChart, zuttoraTheme, INTERVAL_MS, IST_OFFSET_MS } from '@zuttora/charts';

const chart = createChart(container, {   // the container must have a height
  intervalMs: INTERVAL_MS['5m'],
  tzOffsetMs: IST_OFFSET_MS,
  priceDecimals: 2,
  minMove: 0.05,
  theme: { ...zuttoraTheme, fontFamily: resolvedFontFamily },
});

chart.setData(closedCandles, formingCandle, hasMore);   // Candle = { t, o, h, l, c }, t = slot start in epoch ms
chart.applyTick(price, serverTime);                      // live prices: the last candle moves, slots roll over
chart.on('needMore', (oldest) => { /* load older candles, then chart.prependData(older, hasMore) */ });
chart.on('liveChange', (atLive) => { /* show or hide a "Go to live" button */ });

Also: replaceClosed, setOptions, setPriceLines, setMarkers, setIndicators, setDrawingTool, setDrawings, getDrawings, updateDrawing, deleteSelected, clearDrawings, setDrawingColor, scrollToLive, fitAll, destroy.

Drawing tools (setDrawingTool(tool)): hline, trend, ray, rect, fib, note and measure (a ruler that is never saved). Tap or click to place each point, or press and drag. A finished drawing is picked; drag it to move it, drag a square to move one point, Delete removes it, Escape backs out. Drawings sit at a time and a price, so they stay in place when the candle size changes. The host owns saving: listen to drawingsChange(list), store it, and restore with setDrawings(list). drawingEdit(drawing) fires when a note needs its words (updateDrawing(id, { text })); drawProgress tells a hint line how far along the trader is; setDrawingColor(color) colours the next drawing and the picked one.

Indicators (setIndicators(specs), diffed by id): sma, ema and bollinger are drawn over the candles; rsi and macd get their own pane under the price. They are calculated from every loaded close, the forming candle included, so they move live.

chart.setIndicators([
  { id: 'sma20', type: 'sma', period: 20, color: '#FFD34D' },
  { id: 'rsi', type: 'rsi', period: 14, color: '#C792EA' },
]);

Gestures: drag to pan, wheel or pinch to zoom, press and hold (touch) or hover (mouse) for the crosshair, drag the price axis to scale it, double-click or double-tap to reset, arrow keys, +/-, Home, End.

Status

| | | |---|---| | Core, rendering, interaction (M3 to M5) | done | | Indicators (M8) | done, 0.2.0 | | Drawing tools (M9) | done, 0.3.0 | | Published to npm | after review (needs the NPM_TOKEN secret) |

Develop

yarn install
yarn typecheck && yarn lint && yarn test && yarn build && yarn size
python3 -m http.server   # then open http://localhost:8000/demo/  (after yarn build)

Demo URL options: ?type=candles|line|area|heikinAshi&interval=1m|5m|10m|1h|3h|6h|1D&tick=200 (ms between fake ticks).

Rules: no runtime dependencies, TypeScript that Node can run by stripping types (no enum, namespace or constructor parameter properties), relative imports with the .ts extension, no rounded corners, no console outside src/core/warn.ts.