Charts API Reference

Complete reference for the Quatick Charts SDK. Professional-grade GPU-accelerated charting engine designed for institutional trading platforms. Render 10M+ data points at 60fps with sub-10ms WebSocket-to-pixel latency. TypeScript-native, plugin-first architecture built on WebGL 2.0 and Web Workers.

npm install @quatick/quatick-charts
# or
pnpm add @quatick/quatick-charts
# or
yarn add @quatick/quatick-charts

import { Chart, createChart } from '@quatick/quatick-charts';

// Factory function (recommended)
const chart = createChart({
  container: document.getElementById('my-chart'),
  chartType: 'candlestick',
  theme: 'dark',
  renderer: 'webgl',
  showVolume: true,
  xAxis: {
    visible: true,
    height: 26,
    timezone: 'Asia/Kolkata',
    candleInterval: 60, // 1-minute candles in seconds
  },
  yAxis: {
    visible: true,
    position: 'right',
    precision: 2,
  },
  grid: { visible: true, horizontalVisible: true, verticalVisible: true },
  crosshair: { visible: true, mode: 'magnetic' },
  interactions: {
    enableZoom: true,
    enablePan: true,
    enableCrosshair: true,
    minBarsVisible: 5,
    maxBarsVisible: 5000,
  },
});

// Or use the class directly
const chart2 = new Chart({
  container: '#chart-container',
  theme: 'light',
});

import { Chart } from '@quatick/quatick-charts';

const chart = createChart({ container: '#chart', theme: 'dark' });

// Candle data: sorted array of { time, open, high, low, close, volume }
const candleData = [
  { time: 1710000000, open: 43200, high: 43850, low: 43100, close: 43750, volume: 1250 },
  { time: 1710003600, open: 43750, high: 44200, low: 43600, close: 44100, volume: 1800 },
  // ... more candles
];

// Load data (replaces existing)
chart.setData(candleData);

// Render the chart
chart.render();

// Update a single bar in real-time (append or update last bar)
chart.updateCandle({
  time: Date.now() / 1000,
  open: 44100,
  high: 44300,
  low: 44050,
  close: 44250,
  volume: 320,
});

// Switch chart type at runtime
chart.setChartType('renko');   // Renko bricks (ATR auto-sizing)
chart.setChartType('kagi');    // Kagi lines
chart.setChartType('candlestick');  // Back to candlestick

// Supported types:
type RendererType =
  | 'candlestick'
  | 'hollow-candle'
  | 'volume-candle'
  | 'line'
  | 'step-line'
  | 'baseline'
  | 'heikin-ashi'
  | 'area'
  | 'renko'
  | 'line-break'
  | 'point-figure'
  | 'kagi';

// Programmatic view control
chart.resetView();               // Reset zoom to fit all data
chart.fitContent();              // Fit data to viewport

// Get current visible time range
const range = chart.getVisibleRange();
// Returns: { from: number, to: number, barCount: number }

// Set visible range explicitly
chart.setVisibleRange({ from: 1710000000, to: 1710086400 });

import { PluginRegistry, PluginState } from '@quatick/quatick-charts';

// Access the plugin registry
const registry = chart.getPluginRegistry();

// Check if a plugin is loaded
const state = registry.getPluginState('rsi-14');
// PluginState: UNLOADED | LOADING | INITIALIZED | ACTIVE | ERROR | DESTROYED

// List all registered plugins
const plugins = registry.getAllPlugins();
plugins.forEach(p => {
  console.log(p.id, p.category, p.state);
});

chart.setChartType('candlestick');

chart.api.candlestick.setColors({
  upColor: '#34d399',   downColor: '#f87171',
  wickUpColor: '#34d399', wickDownColor: '#f87171',
});

chart.setChartType('hollow-candle');

chart.setChartType('volume-candle');

chart.setChartType('line');       // smooth close-price line
chart.setChartType('step-line');  // stepped (no interpolation)

chart.api.theme.setLineOptions({ lineColor: '#8b5cf6', lineWidth: 2 });

chart.setChartType('area');

chart.setChartType('baseline');
chart.api.theme.setBaselineOptions({ baseline: 44000 });

chart.setChartType('ohlc');
chart.setChartType('hlc');
chart.setChartType('hlc-area');
chart.setChartType('bars');
chart.setChartType('hlc-bar');
chart.setChartType('columns');
chart.setChartType('high-low');

chart.setChartType('heikin-ashi');

chart.setChartType('renko');

// Fixed brick size
chart.configure({ renko: { brickSize: 100, method: 'hl' } });

// ATR auto-sizing (default when brickSize = 0)
chart.configure({ renko: { brickSize: 0, atrPeriod: 14 } });

chart.setChartType('line-break');
chart.configure({ lineBreak: { lines: 3 } });

chart.setChartType('point-figure');
chart.configure({ pointFigure: { boxSize: 0, reversal: 3 } });

chart.setChartType('kagi');
chart.configure({ kagi: { reversalPct: 0.03 } });

chart.setChartType('range-bars');
chart.configure({ renko: { brickSize: 50 } }); // uses renko engine internally

chart.setChartType('orderflow-chart');

// Bind live orderbook depth (from your broker/feed)
chart.setOrderbookState({
  timestamp: Date.now(),
  bids: [ { price: 43990, size: 12.4, side: 0, /* ... */ } ],
  asks: [ { price: 44010, size: 8.7,  side: 1, /* ... */ } ],
  bestBid: 43990, bestAsk: 44010,
  spread: 20, midPrice: 44000,
  totalBidVolume: 234, totalAskVolume: 198,
  imbalance: 0.08, maxSize: 50,
});

// Configure per-channel
chart.configure({
  orderflowChart: {
    rows: 18, showDeltaRibbon: true,
    showPOC: true, showImbalances: true, showAbsorption: true,
    livePanelWidth: 290, imbalanceRatio: 2.4,
  }
});

chart.setChartType('cluster-chart');
chart.setOrderbookState(state); // IOrderbookState

chart.setChartType('tpo-profile');

chart.setChartType('dom-surface');
chart.setOrderbookState(state);

chart.setChartType('volume-profile');
chart.setChartType('session-volume-profile');

// Enable WebGL renderer
chart.configure({ renderMode: 'webgl' });

// Switch to a native GPU chart type
chart.setChartType('webgl-neon-candles');
chart.setChartType('webgl-glass-candles');
chart.setChartType('webgl-holographic-candles');
chart.setChartType('webgl-liquidity-cloud');
chart.setChartType('webgl-orderflow-storm');
chart.setChartType('webgl-quantum-field');

// 3D candles with explicit preset
chart.setChartType('3d-candles');
chart.configure({ threeD: { preset: 'neon' } }); // neon | glass | holographic | depth | volume | aurora | crystal | inferno | plasma | cosmic | emerald | titanium | phantom | prism

import { registerChartType } from '@quatick/quatick-charts';

// Register a Canvas2D custom chart type
registerChartType({
  id: 'my-candles',
  rendererType: 'canvas',
  render(ctx, context) {
    const { chartArea, dpr, timeToX, priceToY, barSpacing } = context;
    for (const bar of context.visibleBars) {
      const x   = timeToX(bar.time) * dpr;
      const top = priceToY(bar.high) * dpr;
      const btm = priceToY(bar.low) * dpr;
      ctx.beginPath();
      ctx.strokeStyle = bar.close >= bar.open ? '#34d399' : '#f87171';
      ctx.moveTo(x, top); ctx.lineTo(x, btm);
      ctx.stroke();
    }
  },
});

chart.setChartType('my-candles');

interface IOrderbookState {
  timestamp: number;        // Unix ms — used for staleness detection

  bids: IOrderLevel[];      // Sorted descending by price
  asks: IOrderLevel[];      // Sorted ascending by price

  bestBid: number;
  bestAsk: number;
  spread: number;           // bestAsk - bestBid
  midPrice: number;         // (bestBid + bestAsk) / 2

  totalBidVolume: number;   // Sum of all bid sizes
  totalAskVolume: number;   // Sum of all ask sizes
  imbalance: number;        // -1 to +1  (positive = bid-heavy)
  maxSize: number;          // Largest level size (for normalisation)
}

interface IOrderLevel {
  price: number;
  size: number;
  previousSize: number;   // Used to detect delta / absorbed size
  cumulativeSize: number; // Running depth total from best
  orderCount: number;     // Number of resting orders at this price
  side: 0 | 1;            // 0 = bid, 1 = ask
  intensity: number;      // 0–1 normalised heat
  delta: number;          // size - previousSize
  age: number;            // ms since first seen
  isWhale: boolean;       // Exceeds whale threshold
}

import { createChart } from '@quatick/quatick-charts';

const chart = createChart(document.getElementById('chart'), {
  chartType: 'orderflow-chart',
});
chart.setData(ohlcvBars);

// Connect your WebSocket / broker feed
ws.on('depth', (snapshot) => {
  chart.setOrderbookState({
    timestamp:       Date.now(),
    bids:            snapshot.bids.map(toOrderLevel),
    asks:            snapshot.asks.map(toOrderLevel),
    bestBid:         snapshot.bids[0].price,
    bestAsk:         snapshot.asks[0].price,
    spread:          snapshot.asks[0].price - snapshot.bids[0].price,
    midPrice:        (snapshot.bids[0].price + snapshot.asks[0].price) / 2,
    totalBidVolume:  snapshot.bids.reduce((s, l) => s + l.size, 0),
    totalAskVolume:  snapshot.asks.reduce((s, l) => s + l.size, 0),
    imbalance:       0,   // compute or leave 0; renderer re-computes
    maxSize:         Math.max(...snapshot.bids.concat(snapshot.asks).map(l => l.size)),
  });
});

// Unbind
chart.setOrderbookState(null);

// Full combined setup
const chart = createChart(container, {
  chartType: 'orderflow-chart',
  renderMode: 'canvas',
});

// 1. Load historical OHLCV
chart.setData(candles);

// 2. Stream live ticks
ws.on('tick', (tick) => chart.updateCandle(tick));

// 3. Bind depth (optional — synthetic fallback when absent)
depthFeed.on('snapshot', (state) => chart.setOrderbookState(state));

// 4. Configure display
chart.configure({
  orderflowChart: {
    rows: 20,               // price rows per bar
    showDeltaRibbon: true,  // CVD strip below chart
    showPOC: true,          // POC highlight
    showImbalances: true,   // edge imbalance markers
    showAbsorption: true,   // absorption wick highlight
    showLivePanel: true,    // live ladder side panel
    livePanelWidth: 300,
    imbalanceRatio: 2.4,    // minimum ask/bid ratio for imbalance flag
    absorptionRatio: 0.62,  // wick/body ratio for absorption detection
    pricePrecision: 2,
    bidColor: '#ef4444',
    askColor: '#22c55e',
    deltaPositiveColor: '#2dd4bf',
    deltaNegativeColor: '#fb7185',
    pocColor: '#facc15',
    absorptionColor: '#a78bfa',
  },
});

import { registerChartType } from '@quatick/quatick-charts';

registerChartType({
  id: 'my-combined-chart',
  rendererType: 'canvas',

  // Called once when the chart type is activated
  onActivate(chart) {
    // Subscribe to depth data via the chart event bus
    chart.on('orderbookUpdate', (state) => {
      this._latestOB = state;
      chart.requestRedraw();
    });
  },

  render(ctx, context) {
    const { chartArea, dpr, visibleBars, priceToY, timeToX, barSpacing } = context;
    const ob = this._latestOB;

    for (const bar of visibleBars) {
      const cx = timeToX(bar.time) * dpr;
      const hw = (barSpacing * dpr) / 2 - 1;

      // ── Draw OHLCV candle ──────────────────────────────────────────
      const isBull = bar.close >= bar.open;
      ctx.fillStyle = isBull ? '#34d399' : '#f87171';
      const bodyTop = priceToY(Math.max(bar.open, bar.close)) * dpr;
      const bodyBtm = priceToY(Math.min(bar.open, bar.close)) * dpr;
      ctx.fillRect(cx - hw, bodyTop, hw * 2, Math.max(1, bodyBtm - bodyTop));

      // ── Overlay volume bar at bottom ───────────────────────────────
      const volH = Math.min(chartArea.height * dpr * 0.15,
                            (bar.volume / context.maxVolume) * 30 * dpr);
      ctx.fillStyle = 'rgba(139,92,246,0.3)';
      ctx.fillRect(cx - hw, (chartArea.top + chartArea.height) * dpr - volH, hw * 2, volH);

      // ── Show bid/ask spread at price if orderbook bound ───────────
      if (ob) {
        const bidY = priceToY(ob.bestBid) * dpr;
        const askY = priceToY(ob.bestAsk) * dpr;
        ctx.fillStyle = 'rgba(52,211,153,0.15)';
        ctx.fillRect(chartArea.left * dpr, askY, chartArea.width * dpr, bidY - askY);
      }
    }
  },
});

chart.setChartType('my-combined-chart');

chart.on('orderbookUpdate', (state) => {
  console.log('spread:', state.spread, 'imbalance:', state.imbalance);
});

chart.on('whaleAlert', (level) => {
  console.log('Whale on', level.side === 0 ? 'BID' : 'ASK', 'at', level.price, 'size', level.size);
});

// SMA-20 overlay on main pane
const sma = chart.api.indicator.add({
  type: 'sma',
  params: { period: 20, source: 'close' },
  color: '#8b5cf6',
  pane: 0,
  overlay: true,
});

// EMA with custom ID
chart.api.indicator.add({
  type: 'ema',
  params: { period: 50 },
  color: '#f59e0b',
  id: 'ema-50',
});

// Bollinger Bands in main pane
chart.api.indicator.add({
  type: 'bbands',
  params: { period: 20, stdDev: 2 },
  pane: 0,
});

// RSI in sub-pane
chart.api.indicator.add({
  type: 'rsi',
  params: { period: 14, source: 'close' },
  pane: 1,
  overlay: false,
});

// MACD in sub-pane
chart.api.indicator.add({
  type: 'macd',
  params: { fast: 12, slow: 26, signal: 9 },
  pane: 2,
  overlay: false,
});

// Remove by ID
chart.api.indicator.remove('ema-50');

// Toggle visibility
chart.api.indicator.setVisible('rsi', false);

import { BaseIndicator } from '@quatick/quatick-charts';

export class ATRStopIndicator extends BaseIndicator {
  get name() { return 'ATR Stop'; }
  get id() { return 'atr-stop'; }
  get defaultParams() { return { period: 14, multiplier: 2 }; }

  calculate(candles, params) {
    const { period, multiplier } = params;
    const atr = this.calculateATR(candles, period);

    return candles.map((bar, i) => {
      if (i < period) return null;
      const hiLookback = candles.slice(i - period, i + 1).map(b => b.high);
      const hi = Math.max(...hiLookback);
      return {
        time: bar.time,
        value: hi - atr[i] * multiplier,
      };
    }).filter(Boolean);
  }

  // Helper: True Range → ATR
  private calculateATR(candles, period) {
    const trs = candles.map((b, i) => {
      if (i === 0) return b.high - b.low;
      const prev = candles[i - 1];
      return Math.max(b.high - b.low, Math.abs(b.high - prev.close), Math.abs(b.low - prev.close));
    });
    // Wilder's smoothing
    const atr = new Array(candles.length).fill(0);
    atr[period - 1] = trs.slice(0, period).reduce((a, b) => a + b, 0) / period;
    for (let i = period; i < trs.length; i++) {
      atr[i] = (atr[i - 1] * (period - 1) + trs[i]) / period;
    }
    return atr;
  }
}

// Register and use
import { IndicatorRegistry } from '@quatick/quatick-charts';
IndicatorRegistry.register(ATRStopIndicator);

chart.api.indicator.add({
  type: 'atr-stop',
  params: { period: 14, multiplier: 2 },
  color: '#f59e0b',
  pane: 0,
});

// Standard daily VWAP
chart.api.indicator.add({
  type: 'vwap',
  params: { resetType: 'session' },  // 'session' | 'week' | 'month'
  color: '#8b5cf6',
  pane: 0,
});

// Anchored VWAP (anchored to a specific bar's timestamp)
chart.api.indicator.add({
  type: 'vwap',
  params: {
    resetType: 'anchored',
    anchorTime: 1710000000,  // Unix timestamp to anchor from
    stdDevBands: [1, 2],     // Show ±1 and ±2 std dev bands
  },
  color: '#f59e0b',
  pane: 0,
});

// Feed real-time ticks from any source
function onWebSocketMessage(event) {
  const tick = JSON.parse(event.data);
  chart.updateCandle({
    time: tick.timestamp,  // Unix seconds
    open: tick.open,
    high: tick.high,
    low: tick.low,
    close: tick.close,
    volume: tick.volume,
  });
}

// Connect WebSocket manually
const ws = new WebSocket('wss://api.example.com/stream/BTCUSDT/1m');
ws.onmessage = onWebSocketMessage;

// Or with Binance-style kline format
ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  const k = msg.k; // kline object
  chart.updateCandle({
    time: Math.floor(k.t / 1000),  // Convert ms → seconds
    open: parseFloat(k.o),
    high: parseFloat(k.h),
    low: parseFloat(k.l),
    close: parseFloat(k.c),
    volume: parseFloat(k.v),
  });
};

// WebSocket (recommended for live trading)
await chart.api.data.connect({
  protocol: 'websocket',
  url: 'wss://stream.binance.com:9443/ws/btcusdt@kline_1m',
  symbol: 'BTCUSDT',
  timeframe: '1m',
  reconnect: true,
  // Custom transform for Binance kline format
  transform: (msg) => {
    const k = JSON.parse(msg).k;
    return {
      time: Math.floor(k.t / 1000),
      open: parseFloat(k.o),
      high: parseFloat(k.h),
      low: parseFloat(k.l),
      close: parseFloat(k.c),
      volume: parseFloat(k.v),
    };
  },
});

// Server-Sent Events
await chart.api.data.connect({
  protocol: 'sse',
  url: 'https://api.example.com/stream/NIFTY/1m',
  symbol: 'NIFTY50',
  timeframe: '1m',
});

// REST polling (fallback)
await chart.api.data.connect({
  protocol: 'rest',
  url: 'https://api.example.com/klines',
  symbol: 'ETHUSD',
  timeframe: '5m',
  pollInterval: 5000,
});

// Disconnect
chart.api.data.disconnect();

import { EventBus } from '@quatick/quatick-charts';

// Crosshair movement (fires on every mouse move)
chart.on('crosshairMove', ({ time, price, bar }) => {
  console.log('Price:', price.toFixed(2), '| Volume:', bar?.volume);
  // Update custom tooltip, status bar, order entry, etc.
});

// Click on chart canvas
chart.on('click', ({ time, price, screenX, screenY }) => {
  console.log('Clicked:', new Date(time * 1000).toISOString(), price);
});

// Double-click → reset view
chart.on('dblClick', () => {
  chart.resetView();
});

// Visible range changed (after zoom/pan)
chart.on('visibleRangeChange', ({ from, to, barCount }) => {
  console.log(`Showing ${barCount} bars from ${new Date(from * 1000).toDateString()}`);
  // Trigger lazy loading of older historical data
});

// New tick arrived from stream
chart.on('tick', (candle) => {
  console.log('New bar:', candle);
});

// Indicator calculation completed
chart.on('indicatorUpdate', ({ indicatorId, data }) => {
  console.log('Indicator computed:', indicatorId, data.length, 'points');
});

// Remove listener
const handler = ({ price }) => console.log(price);
chart.on('crosshairMove', handler);
chart.off('crosshairMove', handler);

// 1. Fetch historical data from your API
const response = await fetch('/api/candles?symbol=BTCUSDT&interval=1m&limit=500');
const historical = await response.json();

// 2. Load into chart (must be sorted by time ascending)
chart.setData(historical.map(c => ({
  time: c.timestamp,  // Unix seconds
  open: c.open, high: c.high, low: c.low, close: c.close, volume: c.volume,
})));

chart.render();

// 3. Open WebSocket for live updates
const ws = new WebSocket('wss://stream.exchange.com/btcusdt@kline_1m');
ws.onmessage = ({ data }) => {
  const { k } = JSON.parse(data);
  chart.updateCandle({
    time: Math.floor(k.t / 1000),
    open: +k.o, high: +k.h, low: +k.l, close: +k.c, volume: +k.v,
  });
};

// 4. Lazy-load older history when user scrolls left
chart.on('visibleRangeChange', async ({ from }) => {
  if (from <= chart.getEarliestTime() + 3600) {
    const older = await fetchOlderHistory(from - 86400);
    chart.prependData(older);   // Prepend without re-rendering
  }
});

// Enable trendline drawing mode
chart.api.drawing.setTool('trendline');

// Listen for new drawings
chart.on('drawing', (drawing) => {
  console.log('Added:', drawing.type, drawing.id);
  // Persist to backend
  await fetch('/api/drawings', {
    method: 'POST',
    body: JSON.stringify(drawing),
  });
});

// Fibonacci retracement
chart.api.drawing.setTool('fibonacci');
chart.on('drawing', (fib) => {
  console.log('Fib levels:', fib.levels);  // [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1]
});

// Save / restore drawings
const state = chart.api.drawing.exportDrawings();
localStorage.setItem('chart-drawings', JSON.stringify(state));

// Later, on page reload:
const saved = JSON.parse(localStorage.getItem('chart-drawings') || '{}');
chart.api.drawing.importDrawings(saved);

// Clear all
chart.api.drawing.clearAll();

import { BaseOverlay } from '@quatick/quatick-charts';

class VolumeProfileOverlay extends BaseOverlay {
  get name() { return 'Volume Profile'; }
  get id() { return 'volume-profile'; }

  render(ctx: CanvasRenderingContext2D, state: ILayerRenderContext) {
    const { visibleBars, priceToY, canvasWidth, canvasHeight } = state;
    const profile: Record<number, number> = {};

    // Build profile from visible bars
    for (const bar of visibleBars) {
      const priceLevel = Math.round(bar.close * 10) / 10;
      profile[priceLevel] = (profile[priceLevel] || 0) + bar.volume;
    }

    const maxVol = Math.max(...Object.values(profile));
    const maxBarWidth = canvasWidth * 0.15;  // max 15% of chart width

    for (const [priceStr, vol] of Object.entries(profile)) {
      const y = priceToY(parseFloat(priceStr));
      const barWidth = (vol / maxVol) * maxBarWidth;
      ctx.fillStyle = 'rgba(139, 92, 246, 0.25)';
      ctx.fillRect(canvasWidth - barWidth, y - 3, barWidth, 6);
    }
  }
}

chart.api.drawing.addOverlay(new VolumeProfileOverlay());

// Support/Resistance line overlay
class SRLinesOverlay extends BaseOverlay {
  constructor(private levels: number[]) { super(); }

  render(ctx, { priceToY, canvasWidth }) {
    for (const level of this.levels) {
      const y = priceToY(level);
      ctx.save();
      ctx.strokeStyle = 'rgba(139, 92, 246, 0.6)';
      ctx.setLineDash([6, 4]);
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(canvasWidth, y);
      ctx.stroke();

      ctx.fillStyle = 'rgba(139, 92, 246, 0.9)';
      ctx.font = '10px -apple-system, sans-serif';
      ctx.fillText(level.toFixed(2), 8, y - 4);
      ctx.restore();
    }
  }
}

chart.api.drawing.addOverlay(new SRLinesOverlay([44000, 43500, 42800]));

// Order-book depth overlay
class DepthOverlay extends BaseOverlay {
  update(bids: [number, number][], asks: [number, number][]) {
    this._bids = bids;
    this._asks = asks;
  }

  render(ctx, { priceToY, canvasWidth }) {
    const maxQty = Math.max(
      ...this._bids.map(b => b[1]),
      ...this._asks.map(a => a[1])
    );
    const scale = (canvasWidth * 0.12) / maxQty;

    for (const [price, qty] of this._bids) {
      const y = priceToY(price);
      ctx.fillStyle = 'rgba(52,211,153,0.15)';
      ctx.fillRect(0, y, qty * scale, 2);
    }

    for (const [price, qty] of this._asks) {
      const y = priceToY(price);
      ctx.fillStyle = 'rgba(248,113,113,0.15)';
      ctx.fillRect(0, y, qty * scale, 2);
    }
  }
}

import { registerChartType } from '@quatick/quatick-charts';

registerChartType({
  id: 'price-bands',
  rendererType: 'canvas',
  label: 'Price Bands',
  canvasOnly: true,

  onActivate(chart) {
    // one-time setup — subscribe to events, allocate buffers, etc.
    this._colors = { bull: '#34d399', bear: '#f87171', neutral: '#8b5cf6' };
  },

  onDataChange(bars) {
    // pre-compute derived values when data changes
    this._sma = computeSMA(bars, 20);
    this._bands = computeBollinger(bars, 20, 2);
  },

  render(ctx, context) {
    const {
      chartArea, dpr,
      visibleBars,   // IOHLCBar[] — only bars in the current viewport
      timeToX,       // (time: number) => number (CSS px)
      priceToY,      // (price: number) => number (CSS px)
      barSpacing,    // CSS px between bar centers
      barWidth,      // CSS px bar slot width
      timeRange,     // { start, end } — visible time range
    } = context;

    // Clip to chart area
    ctx.save();
    ctx.beginPath();
    ctx.rect(
      chartArea.left * dpr, chartArea.top * dpr,
      chartArea.width * dpr, chartArea.height * dpr,
    );
    ctx.clip();

    // Draw Bollinger Band fill
    if (this._bands) {
      ctx.fillStyle = 'rgba(139, 92, 246, 0.07)';
      ctx.beginPath();
      visibleBars.forEach((bar, i) => {
        const x = timeToX(bar.time) * dpr;
        const y = priceToY(this._bands.upper[bar.time]) * dpr;
        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
      });
      [...visibleBars].reverse().forEach((bar) => {
        ctx.lineTo(
          timeToX(bar.time) * dpr,
          priceToY(this._bands.lower[bar.time]) * dpr,
        );
      });
      ctx.closePath();
      ctx.fill();
    }

    // Draw candlestick bars
    const hw = (barSpacing * dpr) / 2 - 1;
    for (const bar of visibleBars) {
      const x  = timeToX(bar.time) * dpr;
      const isBull = bar.close >= bar.open;

      // Wick
      ctx.strokeStyle = isBull ? this._colors.bull : this._colors.bear;
      ctx.lineWidth   = dpr;
      ctx.beginPath();
      ctx.moveTo(x, priceToY(bar.high) * dpr);
      ctx.lineTo(x, priceToY(bar.low)  * dpr);
      ctx.stroke();

      // Body
      ctx.fillStyle  = isBull ? this._colors.bull : this._colors.bear;
      const bodyTop  = priceToY(Math.max(bar.open, bar.close)) * dpr;
      const bodyBtm  = priceToY(Math.min(bar.open, bar.close)) * dpr;
      ctx.fillRect(x - hw, bodyTop, hw * 2, Math.max(1, bodyBtm - bodyTop));
    }

    ctx.restore();
  },
});

import { registerChartType } from '@quatick/quatick-charts';

const VERT = `#version 300 es
precision highp float;

// Provided by the chart engine
uniform mat4  u_mvp;         // model-view-projection matrix
uniform float u_barWidth;    // normalised bar slot width
uniform float u_priceMin;    // visible price range min
uniform float u_priceMax;    // visible price range max

// Per-instance OHLCV attributes
in float a_open;  in float a_high;
in float a_low;   in float a_close;
in float a_time;  in float a_volume;

out float v_delta;
out float v_volume;

void main() {
  float normPrice = (a_close - u_priceMin) / max(1.0, u_priceMax - u_priceMin);
  gl_Position = u_mvp * vec4(a_time, normPrice, 0.0, 1.0);
  gl_PointSize = u_barWidth;
  v_delta  = a_close - a_open;
  v_volume = a_volume;
}
`;

const FRAG = `#version 300 es
precision highp float;

in  float v_delta;
in  float v_volume;
out vec4  fragColor;

void main() {
  // Volume-weighted color: green for bull, red for bear
  float vol  = clamp(v_volume / 5000.0, 0.0, 1.0);
  vec3  bull = mix(vec3(0.12, 0.55, 0.45), vec3(0.20, 0.83, 0.60), vol);
  vec3  bear = mix(vec3(0.55, 0.12, 0.12), vec3(0.97, 0.44, 0.44), vol);
  fragColor  = vec4(v_delta >= 0.0 ? bull : bear, 0.92);
}
`;

registerChartType({
  id: 'volume-weighted-glow',
  rendererType: 'webgl',
  label: 'Volume-Weighted Glow',

  onActivate(chart) {
    const { gl } = chart.getWebGLContext();
    this._program = compileProgram(gl, VERT, FRAG);  // your helper
    this._vao = gl.createVertexArray();
    // bind attribute pointers to the shared OHLCV VBO provided by the engine
    const ohlcvBuffer = chart.getSharedOHLCVBuffer();
    bindAttributes(gl, this._vao, this._program, ohlcvBuffer);
  },

  onDeactivate(chart) {
    const { gl } = chart.getWebGLContext();
    gl.deleteProgram(this._program);
    gl.deleteVertexArray(this._vao);
  },

  render(ctx, context) {
    const { gl, visibleBars, chartArea, dpr } = context;
    if (!gl || !this._program) return;

    gl.useProgram(this._program);
    gl.bindVertexArray(this._vao);

    // Upload uniforms
    const mvp  = context.getMVPMatrix();   // provided by engine
    const uMVP = gl.getUniformLocation(this._program, 'u_mvp');
    gl.uniformMatrix4fv(uMVP, false, mvp);
    gl.uniform1f(gl.getUniformLocation(this._program, 'u_barWidth'),
                 context.barWidth * dpr);
    gl.uniform1f(gl.getUniformLocation(this._program, 'u_priceMin'),
                 context.priceRange.min);
    gl.uniform1f(gl.getUniformLocation(this._program, 'u_priceMax'),
                 context.priceRange.max);

    // Draw instanced — one point per bar
    gl.drawArrays(gl.POINTS, context.visibleStartIndex, visibleBars.length);
    gl.bindVertexArray(null);
  },
});

chart.configure({ renderMode: 'webgl' });
chart.setChartType('volume-weighted-glow');

import { extendChartType } from '@quatick/quatick-charts';

// Add a spread ribbon on top of the DOM Surface chart
extendChartType('dom-surface', {
  id: 'dom-surface-spread',
  label: 'DOM Surface + Spread',

  afterRender(ctx, context) {
    const ob = context.orderbookState;
    if (!ob) return;
    const { chartArea, dpr, priceToY } = context;
    const bidY = priceToY(ob.bestBid) * dpr;
    const askY = priceToY(ob.bestAsk) * dpr;
    // Highlight the spread zone in amber
    ctx.fillStyle = 'rgba(251, 191, 36, 0.12)';
    ctx.fillRect(chartArea.left * dpr, askY, chartArea.width * dpr, bidY - askY);
    // Spread label
    ctx.fillStyle = '#fbbf24';
    ctx.font = `${11 * dpr}px ui-monospace, monospace`;
    ctx.textAlign = 'right';
    ctx.fillText(`spr ${ob.spread.toFixed(2)}`,
      (chartArea.left + chartArea.width) * dpr - 8 * dpr,
      (askY + bidY) / 2);
  },
});

chart.setChartType('dom-surface-spread');

registerChartType({
  id: 'composite-flow',
  rendererType: 'canvas',
  canvasOnly: true,
  requiresOrderbook: true,
  label: 'Composite Flow',

  onDataChange(bars) {
    this._bars = bars;
    // Pre-compute volume distribution for the profile panel
    this._vpRows = buildVolumeProfile(bars, 40 /* rows */);
  },

  render(ctx, context) {
    const { chartArea, dpr, visibleBars, timeToX, priceToY,
            barSpacing, priceRange, orderbookState } = context;
    const hw = (barSpacing * dpr) / 2 - 1;

    ctx.save();
    ctx.rect(chartArea.left * dpr, chartArea.top * dpr,
             chartArea.width * dpr, chartArea.height * dpr);
    ctx.clip();

    // ── 1. Volume profile strip (right 15%) ──────────────────────
    const vpWidth = chartArea.width * dpr * 0.15;
    const vpLeft  = (chartArea.left + chartArea.width) * dpr - vpWidth;
    if (this._vpRows) {
      const maxVPVol = Math.max(...this._vpRows.map(r => r.volume));
      for (const row of this._vpRows) {
        const top = priceToY(row.priceHigh) * dpr;
        const btm = priceToY(row.priceLow)  * dpr;
        const w   = vpWidth * (row.volume / maxVPVol);
        ctx.fillStyle = row.isPOC ? 'rgba(250,204,21,0.4)' : 'rgba(139,92,246,0.2)';
        ctx.fillRect(vpLeft, top, w, Math.max(1, btm - top));
      }
    }

    // ── 2. OHLCV candles ─────────────────────────────────────────
    for (const bar of visibleBars) {
      const x = timeToX(bar.time) * dpr;
      const isBull = bar.close >= bar.open;
      ctx.strokeStyle = isBull ? '#34d399' : '#f87171';
      ctx.lineWidth   = dpr;
      ctx.beginPath();
      ctx.moveTo(x, priceToY(bar.high) * dpr);
      ctx.lineTo(x, priceToY(bar.low)  * dpr);
      ctx.stroke();
      ctx.fillStyle  = isBull ? '#34d399' : '#f87171';
      const bt = priceToY(Math.max(bar.open, bar.close)) * dpr;
      const bb = priceToY(Math.min(bar.open, bar.close)) * dpr;
      ctx.fillRect(x - hw, bt, hw * 2, Math.max(1, bb - bt));
    }

    // ── 3. Live depth curve (if orderbook bound) ─────────────────
    if (orderbookState) {
      const asks = orderbookState.asks.slice(0, 20);
      const maxDepth = asks.reduce((s, l) => s + l.size, 0);
      let cum = 0;
      ctx.beginPath();
      for (const level of asks) {
        cum += level.size;
        const x = chartArea.left * dpr + (cum / maxDepth) * chartArea.width * dpr * 0.25;
        const y = priceToY(level.price) * dpr;
        asks.indexOf(level) === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
      }
      ctx.strokeStyle = 'rgba(34,197,94,0.7)';
      ctx.lineWidth   = 1.5 * dpr;
      ctx.stroke();
    }

    ctx.restore();
  },
});

// Configure via constructor
const chart = createChart({
  container: '#chart',
  interactions: {
    enableZoom: true,
    enablePan: true,
    minBarsVisible: 5,
    maxBarsVisible: 2000,
    zoomSensitivity: 1.2,
    enableDoubleClick: true,
    enableKeyboard: true,
  },
});

// Programmatic control
chart.api.interaction.zoomIn(1.5);      // 1.5x zoom in
chart.api.interaction.zoomOut(2);       // 2x zoom out
chart.api.interaction.resetZoom();      // Reset to default range
chart.api.interaction.fitContent();     // Fit all data in view
chart.api.interaction.pan(-50);         // Pan 50 pixels left

// Set precise visible range (Unix timestamps in seconds)
chart.api.interaction.setVisibleRange({
  from: Date.now() / 1000 - 7 * 86400,   // Last 7 days
  to: Date.now() / 1000,
});

// Lock/unlock interaction
chart.api.interaction.setEnabled(false);  // Freeze chart (presentation mode)
chart.api.interaction.setEnabled(true);   // Re-enable

// Configure crosshair
chart.api.crosshair.configure({
  visible: true,
  mode: 'magnetic',
  lineColor: 'rgba(139, 92, 246, 0.5)',
  lineWidth: 1,
  lineDash: [4, 4],
  showPriceLabel: true,
  showTimeLabel: true,
});

// Crosshair move event — build custom tooltip
chart.on('crosshairMove', (event) => {
  const { time, price, bar } = event;

  if (!bar) return;

  // Update a custom HUD/overlay
  document.getElementById('price-hud').textContent =
    `O: ${bar.open.toFixed(2)} H: ${bar.high.toFixed(2)} L: ${bar.low.toFixed(2)} C: ${bar.close.toFixed(2)} V: ${bar.volume.toLocaleString()}`;
});

// Sync crosshairs across multiple chart instances
chart1.on('crosshairMove', ({ time }) => {
  chart2.api.crosshair.moveToTime(time);
});

// Update axes at runtime
chart.api.axis.configureX({
  visible: true,
  height: 26,
  timezone: 'Asia/Kolkata',  // IST
});

chart.api.axis.configureY({
  visible: true,
  position: 'right',
  precision: 2,
  logScale: false,
  autoScale: true,
});

// Fit visible price range to current data
chart.api.axis.fitYToContent();

chart.api.grid.configure({
  visible: true,
  horizontalVisible: true,
  verticalVisible: true,
  horizontalColor: 'rgba(255,255,255,0.04)',
  verticalColor: 'rgba(255,255,255,0.03)',
  horizontalStyle: 'dashed',   // 'solid' | 'dashed' | 'dotted'
  verticalStyle: 'dashed',
});

• renderer: 'webgl' — Use WebGL for maximum GPU-accelerated throughput (default)
• performanceHint: 'performance' — Reduces visual quality for best FPS on low-end devices
• Limit visible indicator count. Use sub-panes for oscillators to reduce main pane overdraw.
• Call chart.api.data.prependData() for history loading — avoids full re-render.
• Avoid calling chart.setData() during streaming — use chart.updateCandle() for tick updates.
• Destroy charts when unmounted: chart.destroy() frees GPU memory, WebSocket, and Workers.
• For dashboards with 10+ charts, use renderer: 'canvas' on background charts to save GPU budget.

// Performance-tuned config for embedded/widget use
const chart = createChart({
  container: '#chart',
  renderer: 'webgl',
  performanceHint: 'performance',
  showVolume: false,             // Disable volume to save one render pass
  grid: { visible: false },      // Disable grid lines
  crosshair: { visible: false }, // Disable crosshair if not needed
  interactions: {
    enableZoom: false,           // Lock chart in presentation mode
    enablePan: false,
    enableCrosshair: false,
  },
});

// Cleanup on unmount (React / Vue)
useEffect(() => {
  return () => chart.destroy();
}, []);

import { createPayoffChart, calculatePayoffChartData } from '@quatick/quatick-charts';

// 1. Create the chart
const chart = createPayoffChart({
  container: document.getElementById('payoff'),
  height: 400,
  theme: 'dark',           // 'dark' | 'light' | IPayoffChartTheme
  animation: { enabled: true, fadeInCurves: true, duration: 600 },
  crosshair: { enabled: true },
  tooltip:   { enabled: true },
});

// 2. Define strategy legs
const legs = [
  // Short put (lower wing)
  { id: 'l1', instrumentType: 'option', optionType: 'put',  positionType: 'short', strike: 19300, expiry: '2025-06-26', quantity: 1, premium: 150, lotSize: 50, iv: 0.15 },
  // Long put (further OTM)
  { id: 'l2', instrumentType: 'option', optionType: 'put',  positionType: 'long',  strike: 19100, expiry: '2025-06-26', quantity: 1, premium:  70, lotSize: 50, iv: 0.15 },
  // Short call (upper wing)
  { id: 'l3', instrumentType: 'option', optionType: 'call', positionType: 'short', strike: 19700, expiry: '2025-06-26', quantity: 1, premium: 160, lotSize: 50, iv: 0.15 },
  // Long call (further OTM)
  { id: 'l4', instrumentType: 'option', optionType: 'call', positionType: 'long',  strike: 19900, expiry: '2025-06-26', quantity: 1, premium:  75, lotSize: 50, iv: 0.15 },
];

// 3. Calculate payoff data
const data = calculatePayoffChartData(legs, 19500, 0.15, 30, {
  numPoints: 200,
  priceRangePercent: 0.12,   // ±12% around spot
});

// 4. Add SD bands (optional)
const sigma1 = 19500 * 0.15 * Math.sqrt(30 / 365);
data.sdBands = [
  { sigma: 1, lower: 19500 - sigma1, upper: 19500 + sigma1, color: '#42a5f5', opacity: 0.12, label: '±1σ' },
  { sigma: 2, lower: 19500 - sigma1 * 2, upper: 19500 + sigma1 * 2, color: '#ab47bc', opacity: 0.08, label: '±2σ' },
];

// 5. Render
chart.setData(data);

import { calculatePayoffChartData } from '@quatick/quatick-charts';

const data = calculatePayoffChartData(
  legs,            // IStrategyLeg[]
  spotPrice,       // Current underlying price
  impliedVol,      // IV as a decimal (0.15 = 15%)
  daysToExpiry,    // Days until front-month expiry
  {
    numPoints:         200,   // Resolution of the curve
    priceRangePercent: 0.12,  // ±% around spot for the X-axis
    daysToExpiry:       15,   // DTE for the target-date curve
    ivChange:           0,    // IV shift for scenario analysis
  },
);

// data.curves[0]       → At-Expiry curve (green/filled)
// data.curves[1]       → Target-date curve (blue/dashed)
// data.breakevens      → Array of breakeven prices
// data.maxProfit       → Max profit (per lot)
// data.maxLoss         → Max loss (per lot)
// data.netPremium      → Net premium received/paid
// data.netGreeks       → Aggregate Greeks for the strategy

// Annualised IV × sqrt(DTE/365) gives single-sigma expected move
const spot = 19500;
const iv   = 0.15;   // 15%
const dte  = 30;     // days

const sigma1 = spot * iv * Math.sqrt(dte / 365);
const sigma2 = sigma1 * 2;

data.sdBands = [
  {
    sigma:   1,
    lower:   spot - sigma1,
    upper:   spot + sigma1,
    color:   '#42a5f5',
    opacity: 0.12,
    label:   '±1σ',
  },
  {
    sigma:   2,
    lower:   spot - sigma2,
    upper:   spot + sigma2,
    color:   '#ab47bc',
    opacity: 0.08,
    label:   '±2σ',
  },
];

// Provide OI data per strike
data.oiData = [
  { strike: 19100, callOI: 45000, putOI: 120000 },
  { strike: 19200, callOI: 62000, putOI: 98000  },
  { strike: 19300, callOI: 88000, putOI: 210000 },
  { strike: 19500, callOI: 105000, putOI: 95000 },
  { strike: 19700, callOI: 145000, putOI: 48000 },
  { strike: 19900, callOI: 72000,  putOI: 31000 },
];

chart.setConfig({
  oiOverlay: {
    enabled:      true,
    showCalls:    true,
    showPuts:     true,
    position:     'bottom',   // 'bottom' | 'overlay'
    heightRatio:  0.25,       // 25% of chart height
    barWidthRatio: 0.7,
    callColor:    '#42a5f5',
    putColor:     '#f87171',
    opacity:      0.75,
  },
});

// Hover — fired on every mousemove with nearest P&L value
chart.on('hover', (e) => {
  console.log('price:', e.price, 'pnl:', e.pnl);
});

// Breakeven hover — fired when crosshair crosses a breakeven line
chart.on('breakevenHover', (e) => {
  console.log('breakeven at:', e.price);
});

// Resize — fired when the chart redraws due to container resize
chart.on('resize', (e) => {
  console.log('new size:', e.width, e.height);
});

// Clean up
chart.on('destroy', () => {
  console.log('chart destroyed');
});

// Candle / bar object
interface Candle {
  time: number;     // Unix timestamp (seconds)
  open: number;
  high: number;
  low: number;
  close: number;
  volume: number;
}

// Extended candle with optional metadata
interface ExtendedCandle extends Candle {
  color?: string;   // Override bar color
  text?: string;    // Annotation label
  [key: string]: any;
}

// Time range
interface TimeRange {
  from: number;     // Start Unix timestamp
  to: number;       // End Unix timestamp
}

// Performance metrics
interface FrameStats {
  fps: number;
  renderTimeMs: number;
  visibleBars: number;
  memoryMb: number;
  indicatorCalcMs: number;
  workerCpuPercent: number;
}

// Renderer types
type RendererType =
  | 'candlestick' | 'hollow-candle' | 'volume-candle'
  | 'line' | 'step-line' | 'baseline' | 'area'
  | 'heikin-ashi' | 'renko' | 'kagi' | 'line-break'
  | 'point-figure';

// Lifecycle events
chart.on('ready',       () => {});
chart.on('destroy',     () => {});

// Data events
chart.on('tick',        (candle: Candle) => {});
chart.on('dataLoad',    ({ candles, fromCache }) => {});
chart.on('dataError',   (err: Error) => {});

// Stream events
chart.on('connected',   ({ protocol, url }) => {});
chart.on('disconnect',  ({ reason }) => {});
chart.on('reconnect',   ({ attempt }) => {});

// User interaction events
chart.on('click',       ({ time, price, screenX, screenY }) => {});
chart.on('dblClick',    ({ time, price }) => {});
chart.on('rightClick',  ({ time, price, screenX, screenY }) => {});
chart.on('crosshairMove', ({ time, price, bar }) => {});
chart.on('crosshairLeave', () => {});
chart.on('zoom',        ({ factor, centerTime }) => {});
chart.on('pan',         ({ direction, deltaTime }) => {});
chart.on('visibleRangeChange', ({ from, to, barCount }) => {});

// Drawing events
chart.on('drawing',         (drawing) => {});
chart.on('drawingChange',   (drawing) => {});
chart.on('drawingRemove',   ({ id }) => {});
chart.on('drawingsClear',   () => {});

// Indicator events
chart.on('indicatorAdd',    ({ id, type }) => {});
chart.on('indicatorRemove', ({ id }) => {});
chart.on('indicatorUpdate', ({ id, data }) => {});

// Chart-type events
chart.on('chartTypeChange', ({ from, to }) => {});

// Performance events
chart.on('profile',     ({ frame, totalMs, renderMs, overlayMs }) => {});

import { BasePlugin, PluginState, PluginCategory, PluginRegistry } from '@quatick/quatick-charts';

export class OrderFlowPlugin extends BasePlugin {
  get name() { return 'Order Flow Footprint'; }
  get id() { return 'order-flow'; }
  get category() { return PluginCategory.RENDERER; }

  async initialize(context) {
    this.context = context;
    this.state = PluginState.INITIALIZED;
    this._registerEventHandlers();
  }

  async render(series, renderState) {
    const { visibleBars, priceToY, timeToX, barWidth, canvasHeight } = renderState;
    const ctx = this.context.canvas.getContext('2d');

    for (const bar of visibleBars) {
      const x = timeToX(bar.time);
      const y = priceToY(bar.close);
      const delta = (bar.buyVolume || 0) - (bar.sellVolume || 0);
      const color = delta >= 0 ? '#34d399' : '#f87171';

      ctx.fillStyle = color;
      ctx.font = '9px monospace';
      ctx.fillText(Math.abs(delta).toFixed(0), x - barWidth / 2 + 2, y - 4);
    }
  }

  async cleanup() {
    this.state = PluginState.DESTROYED;
  }
}

// Register globally
PluginRegistry.register(OrderFlowPlugin);

// Use in chart
chart.api.indicator.add({ type: 'order-flow' });

// Access runtime metrics
const metrics = chart.getMetrics();
console.log({
  fps:                 metrics.fps,
  renderTimeMs:        metrics.renderTimeMs,
  visibleBars:         metrics.visibleBars,
  memoryMb:            metrics.memoryMb,
  indicatorCalcMs:     metrics.indicatorCalcMs,
  workerUtilization:   metrics.workerCpuPercent,
});

// Enable frame-by-frame profiling
chart.enableProfiling(true);
chart.on('profile', (data) => {
  console.log({
    totalMs:     data.totalMs,
    geometryMs:  data.geometryMs,
    renderMs:    data.renderMs,
    overlayMs:   data.overlayMs,
    indicatorMs: data.indicatorMs,
  });
});

// Export chart as PNG data URL
const dataUrl = await chart.api.export.screenshot();
const link = document.createElement('a');
link.href = dataUrl;
link.download = 'chart.png';
link.click();

// Export chart data as JSON
const data = chart.api.export.getData();
// Returns: { candles: Candle[], indicators: Record<id, IndicatorValue[]>, range: TimeRange }

// Export chart config (for persistence)
const config = chart.api.export.getConfig();
localStorage.setItem('chart-config', JSON.stringify(config));

// Restore from saved config
const saved = JSON.parse(localStorage.getItem('chart-config')!);
chart.api.export.applyConfig(saved);

// Configure pane heights
chart.api.layout.configurePanes([
  { height: '70%', resizable: true },    // Main pane: 70%
  { height: '15%', minHeight: 60 },      // RSI sub-pane
  { height: '15%', minHeight: 60 },      // MACD sub-pane
]);

// Listen for pane resize
chart.on('paneResize', ({ paneIndex, newHeight }) => {
  console.log('Pane', paneIndex, 'resized to', newHeight, 'px');
});

• Always call chart.destroy() when unmounting (React useEffect cleanup, Vue onUnmounted).
• Large datasets: use prependData() for lazy history loading. Avoid replacing the entire dataset during streaming.
• Web Workers: Indicator calculations run off-main-thread by default. No special config required.
• IndexedDB: Use the optional @quatick/cache-adapter to cache historical data locally.
• GPU context loss: The chart listens for WebGL context-loss events and automatically recovers.