Skip to main content

Watchlist

The Watchlist module provides a dedicated panel for monitoring multiple financial instruments simultaneously. It displays real-time price updates, changes, and volume information for symbols in user-defined watchlists.

Key Features​

  • Create and manage multiple watchlists
  • Real-time symbol price updates
  • Price change tracking (absolute and percentage)
  • Volume information display
  • Symbol logo integration
  • Quick access to charting for any symbol

Architecture / Behavior​

The Watchlist module is implemented as a right sidebar panel that subscribes to real-time symbol details updates through the data feed's subscribeSymbolDetails method. It maintains internal state for active watchlists and their symbols, and uses the GlobalStore to manage watchlist-related state.

API Usage​

Initialization​

The Watchlist module is enabled by default in the chart configuration:

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

Methods​

The Watchlist functionality is accessed through the GlobalApi and ChartApi:

// Get all watchlists
const watchlists = chart.getWatchlists();

// Create a new watchlist
chart.createWatchlist('My Portfolio', [
  { symbol: 'AAPL' },
  { symbol: 'GOOGL' },
  { symbol: 'MSFT' }
]);

// Add symbol to existing watchlist
chart.addSymbolToWatchlist('my-portfolio-id', { symbol: 'TSLA' });

// Remove symbol from watchlist
chart.deleteSymbolFromWatchlist('my-portfolio-id', 'TSLA');

Configuration Options​

OptionTypeDefaultDescription
enabled_featuresstring[]['watchlist']Enable/disable the watchlist panel
watchlist_symbolsIWatchlistSymbol[][]Initial symbols to load in the default watchlist

Events​

The Watchlist module emits events through the GlobalStore:

  • watchlist:added - When a new watchlist is created
  • watchlist:removed - When a watchlist is deleted
  • watchlist:symbol_added - When a symbol is added to a watchlist
  • watchlist:symbol_removed - When a symbol is removed from a watchlist
  • watchlist:updated - When a watchlist is modified

Customization​

  • UI styling can be customized via CSS classes
  • Watchlist layout can be configured through the layout option
  • Symbol display format can be customized using the symbol_format option

Use Cases​

  • Monitoring a portfolio of stocks
  • Tracking related instruments (e.g., indices and their components)
  • Following sector-specific stocks
  • Day trading with multiple instruments

Limitations​

  • Requires data feed implementation of getWatchlists, createWatchlist, addSymbolToWatchlist, and related methods
  • No built-in watchlist persistence - depends on data feed implementation
  • Limited to symbols supported by the connected data provider

✅ Supported​

  • Watchlist creation and management
  • Real-time symbol updates
  • Multiple watchlist support

❌ Not Supported​

  • Watchlist sharing between users
  • Advanced filtering and sorting options
  • Historical watchlist data

⚠️ Partial / Custom​

  • Watchlist persistence requires custom data feed implementation
  • Watchlist export/import functionality requires custom implementation

Integration​

This module should be linked from:

  • Charting section → Right Sidebar Panels
  • Advanced Features → Modules
  • API Reference → Data Feed Interface