Function init

examples/candlestick-streaming/main.ts:90–161

()

}

async function init() {
  const container = document.getElementById('chart')!;

  // Generate impressive historical data
  console.log(`Generating ${currentCandleCount.toLocaleString()} historical candles...`);
  const startGen = performance.now();

  data = generateHistoricalData({
    symbol: CONFIG.symbol,
    startPrice: CONFIG.startPrice,
    volatility: 0.03, // 3% volatility like static example for nice candle sizes
    candleCount: currentCandleCount,
    intervalMs: candleIntervalMs,
  });

  console.log(`Generated in ${(performance.now() - startGen).toFixed(0)}ms`);

  // Get last price for tick simulator
  const lastCandle = data[data.length - 1];
  const lastPrice = getClose(lastCandle); // close price

  // Seed simulated time from the most recent historical candle so the first live candle
  // continues smoothly after history (instead of starting far in the past/future).
  simulatedTimeMs = getTimestamp(lastCandle) + candleIntervalMs;
  lastSimPerfNow = performance.now();

  // Create chart
  fullChartOptions = {
    xAxis: { type: 'time', name: 'Time' },
    yAxis: { type: 'value', name: `${CONFIG.symbol}` },
    series: [
      {
        type: 'candlestick',
        name: CONFIG.symbol,
        data,
        style: 'classic',
        itemStyle: {
          upColor: '#22c55e',
          downColor: '#ef4444',
          upBorderColor: '#16a34a',
          downBorderColor: '#dc2626',
        },
        sampling: 'ohlc',
        samplingThreshold: 2000,
      },
    ],
    dataZoom: getDataZoomConfig(currentCandleCount),
    tooltip: { trigger: 'item' },
    animation: false, // Critical for streaming performance
    autoScroll: true,
  };
  chart = await createChart(container, fullChartOptions);

  // Setup tick simulator
  candleAggregator = createCandleAggregator(candleIntervalMs);

  tickSimulator = createTickSimulator({
    initialPrice: lastPrice,