Skip to main content

Intervals

The Intervals feature provides comprehensive timeframe management for the financial charting library. This system enables users to change the chart's resolution and timeframe, supporting various aggregation periods from tick data to monthly charts.

Key Features​

  • Timeframe switching (1m, 5m, 15m, 30m, 1h, 4h, 1d, 1w, 1M)
  • Tick-based charting support
  • Custom interval configuration
  • Interval validation and normalization
  • Real-time interval updates
  • Historical data loading based on selected interval

Architecture / Behavior​

The intervals system follows a layered architecture:

  1. UI Layer: Top toolbar timeframe selector with dropdown menu
  2. API Layer: ChartApi and GlobalApi interval methods
  3. State Layer: ChartStore manages current interval state
  4. Data Layer: Data feed handles historical data requests based on interval

The interval flow: UI → ChartApi → ChartStore → DataFeed → Backend API → Response → ChartStore → UI.

API Usage​

Initialization​

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

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

Methods​

ChartApi.setInterval() - Set the chart interval:

// Set interval to 1 minute
await chart.getApi().setInterval('1');

// Set interval to daily
await chart.getApi().setInterval('1D');

// Set interval to weekly
await chart.getApi().setInterval('1W');

ChartApi.getInterval() - Get the current chart interval:

const currentInterval = chart.getApi().getInterval();
console.log(`Current interval: ${currentInterval}`);

Configuration Options​

OptionTypeDefaultDescription
intervalstring'1D'Default chart interval
enabled_featuresstring[]['interval']Enable/disable interval functionality
enabled_resolutionstring[]['1', '5', '15', '30', '60', '1D', '1W']List of enabled resolutions
disabled_resolutionstring[][]List of disabled resolutions

Events​

  • interval:changed - Fired when interval changes

Customization​

  • UI styling can be customized via CSS classes
  • Available intervals can be customized through configuration
  • Interval display format can be customized using locale settings

Use Cases​

  • Switching between intraday and daily timeframes
  • Analyzing different market cycles
  • Building multi-timeframe analysis systems
  • Creating custom timeframe indicators
  • Integration with trading strategies

Limitations​

  • Requires data feed implementation of getBars() method
  • Performance depends on backend API response times
  • Some intervals may not be supported by all data feeds
  • Limited to intervals supported by connected data feeds

✅ Supported​

  • Interval switching API methods
  • Interval state management
  • Real-time interval updates
  • Historical data loading

Feature Classification​

Core Feature - Fundamental functionality required for basic chart operation

Dependencies​

  • Requires backend? Yes (data feed API)
  • Requires storage? No
  • Requires real-time data? Yes (for live updates)
  • Requires UI controls? Yes (timeframe selector)

Missing Implementation Analysis​

The intervals functionality is fully implemented and production-ready. All core interval capabilities are present in the codebase with proper error handling and validation mechanisms.

Consistency Validation​

The intervals 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: Timeframe selector, dropdown menu, visual feedback
  • API exposes: setInterval(), getInterval(), getAvailableIntervals() methods
  • Must implement manually: Custom data feed interval support

User Flow​

  1. User selects interval from dropdown
  2. ChartApi validates interval
  3. ChartStore updates state
  4. DataFeed requests historical data
  5. Chart renders new timeframe
  6. UI updates visual indicator

Integration with Existing Docs​

This feature should be linked from:

  • Charting section → Top Toolbar
  • API Reference → ChartApi
  • Connecting Data → Data Feeds
  • Getting Started → Quick Start Guide