Skip to main content

Replay

The Replay feature provides comprehensive chart replay capabilities for the financial charting library. This system enables users to replay historical market data at various speeds, supporting both manual and automatic playback modes.

Key Features​

  • Manual step-by-step replay (forward/backward)
  • Automatic playback with adjustable speed
  • Speed control (1x, 2x, 5x, 10x)
  • Start/stop/pause controls
  • Timestamp-based synchronization
  • Real-time data switching
  • Performance-optimized replay rendering

Architecture / Behavior​

The replay system follows a layered architecture:

  1. UI Layer: Replay panel with playback controls
  2. API Layer: ChartApi and GlobalApi replay methods
  3. State Layer: ChartStore manages replay state
  4. Engine Layer: ReplayManager handles timing and frame management

The replay flow: UI → ChartApi → ChartStore → ReplayManager → DataFeed → Canvas → UI.

API Usage​

Initialization​

The replay feature is enabled by default in the chart configuration:

const chart = Chart.create(document.getElementById('container'), {
  // ... other options
  enabled_features: ['replay'], // Enable replay functionality
});

Methods​

ChartApi.startReplay() - Start replay from specified index:

// Start replay from bar index 100
chart.getApi().startReplay(100);

// Start replay from current position
chart.getApi().startReplay(chart.getApi().getVisibleRange().from);

ChartApi.stopReplay() - Stop replay and return to live mode:

chart.getApi().stopReplay();

ChartApi.playReplay() - Start automatic playback:

chart.getApi().playReplay();

ChartApi.pauseReplay() - Pause automatic playback:

chart.getApi().pauseReplay();

ChartApi.setReplaySpeed() - Set replay speed:

// Set speed to 5x
chart.getApi().setReplaySpeed(5);

Configuration Options​

OptionTypeDefaultDescription
enabled_featuresstring[]['replay']Enable/disable replay functionality
replay_default_speednumber1Default replay speed
replay_max_speednumber10Maximum allowed replay speed
replay_buffer_sizenumber1000Number of bars to buffer for replay

Events​

  • replay:start - Fired when replay starts
  • replay:stop - Fired when replay stops
  • replay:play - Fired when automatic playback starts
  • replay:pause - Fired when automatic playback pauses

Customization​

  • UI styling can be customized via CSS classes
  • Replay controls can be customized through configuration
  • Playback speed options can be customized
  • Replay panel visibility can be customized

Use Cases​

  • Backtesting trading strategies
  • Analyzing historical price patterns
  • Training and education
  • Market analysis and research
  • Integration with algorithmic trading systems

Limitations​

  • Requires sufficient historical data
  • Performance depends on data feed response times
  • Limited to data supported by connected data feeds
  • Some data feeds may have limitations on historical data availability

✅ Supported​

  • Replay API methods exist and are functional
  • Manual step-by-step replay
  • Automatic playback
  • Speed control
  • Timestamp-based synchronization

❌ Not Supported​

  • Multi-symbol replay
  • Cross-chart replay synchronization
  • Advanced replay analytics

⚠️ Partial / External​

  • Backend API integration requires custom data feed implementation
  • Replay buffer management requires custom implementation

Feature Classification​

Core Feature - Fundamental functionality required for advanced chart analysis

Dependencies​

  • Requires backend? Yes (data feed API)
  • Requires storage? No
  • Requires real-time data? No (uses historical data)
  • Requires UI controls? Yes (replay panel)

Missing Implementation Analysis​

The replay functionality is fully implemented and production-ready. All core replay capabilities are present in the codebase with proper error handling and performance optimizations.

Consistency Validation​

The replay API follows the same pattern as other API methods with consistent promise-based return values and error handling. Naming conventions are consistent with other features.

UI vs API Separation​

  • UI handles: Playback controls, speed selector, visual feedback
  • API exposes: startReplay(), stopReplay(), playReplay(), pauseReplay(), setReplaySpeed() methods
  • Must implement manually: Custom data feed replay support

User Flow​

  1. User selects replay mode
  2. ChartApi initializes replay state
  3. ChartStore sets replay mode
  4. ReplayManager starts timing loop
  5. DataFeed provides historical bars
  6. Chart renders each bar sequentially
  7. UI updates playback controls

Integration with Existing Docs​

This feature should be linked from:

  • Charting section → Replay Panel
  • API Reference → ChartApi
  • Getting Started → Quick Start Guide
  • Advanced Features → Historical Analysis