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');

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

chart.setChartType('hollow-candle');

// Hollow candle uses the same color API
chart.api.candlestick.setColors({
  upColor: '#34d399',
  downColor: '#f87171',
});

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,
  field: 'close',
});

chart.setChartType('area');

chart.setChartType('baseline');

// Set baseline dynamically
chart.api.theme.setBaselineOptions({ baseline: 44000 });

chart.setChartType('heikin-ashi');

chart.setChartType('renko');

// Fixed brick size
chart.api.theme.setRendererOptions({
  brickSize: 100,     // $100 per brick
  method: 'hl',       // High-Low Renko
});

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

chart.setChartType('line-break');
chart.api.theme.setRendererOptions({ lines: 3 });

chart.setChartType('point-figure');
chart.api.theme.setRendererOptions({ boxSize: 0, reversal: 3 });

chart.setChartType('kagi');
chart.api.theme.setRendererOptions({
  reversalPct: 0.03,
  yangColor: '#34d399',
  yinColor: '#f87171',
});

// 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);
    }
  }
}

// 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.