Skip to main content

Full Screen

The Full Screen feature provides comprehensive fullscreen mode capabilities for the financial charting library. This system enables users to expand the chart to occupy the entire screen, providing an immersive experience for detailed analysis.

Key Features​

  • Toggle between normal and fullscreen modes
  • Browser compatibility (Chrome, Firefox, Safari, Edge)
  • Chart functionality preservation in fullscreen
  • Multiple exit mechanisms (ESC key, button, context menu)
  • Performance optimization for fullscreen rendering
  • Responsive design for different screen sizes
  • Fullscreen state persistence

Architecture / Behavior​

The fullscreen system follows a layered architecture:

  1. UI Layer: Top toolbar fullscreen button and context menu
  2. API Layer: ChartApi and GlobalApi fullscreen methods
  3. State Layer: ChartStore manages fullscreen state
  4. Rendering Layer: FullscreenManager handles browser-specific implementations

The fullscreen flow: UI → ChartApi → ChartStore → FullscreenManager → Browser API → Canvas → UI.

API Usage​

Initialization​

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

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

Methods​

ChartApi.toggleFullscreen() - Toggle fullscreen mode:

// Toggle between normal and fullscreen modes
chart.getApi().toggleFullscreen();

ChartApi.enterFullscreen() - Enter fullscreen mode:

// Enter fullscreen mode
chart.getApi().enterFullscreen();

ChartApi.exitFullscreen() - Exit fullscreen mode:

// Exit fullscreen mode
chart.getApi().exitFullscreen();

ChartApi.isFullscreen() - Check if currently in fullscreen mode:

// Check fullscreen state
const isFullscreen = chart.getApi().isFullscreen();
console.log(`Fullscreen mode: ${isFullscreen}`);

Configuration Options​

OptionTypeDefaultDescription
enabled_featuresstring[]['fullscreen']Enable/disable fullscreen functionality
fullscreen_persistencebooleantrueSave fullscreen state to localStorage
fullscreen_containerHTMLElementnullCustom container for fullscreen

Events​

  • fullscreen:changed - Fired when fullscreen state changes
  • fullscreen:error - Fired when fullscreen operation fails
  • fullscreen:change - Fired when fullscreen state changes

Customization​

  • UI styling can be customized via CSS classes
  • Fullscreen container can be customized
  • Exit behavior can be customized
  • Keyboard shortcuts can be customized

Use Cases​

  • Detailed chart analysis
  • Presentation mode
  • Multi-monitor trading setups
  • Educational purposes
  • Integration with trading platforms

Limitations​

  • Limited to single chart fullscreen
  • Some browsers may have restrictions on fullscreen
  • Requires user interaction for security reasons
  • May not work in some embedded contexts

✅ Supported​

  • Fullscreen toggle API methods
  • Browser compatibility
  • Chart functionality preservation
  • Multiple exit mechanisms
  • Performance optimization

❌ Not Supported​

  • Multi-chart fullscreen
  • Automatic fullscreen without user interaction
  • Advanced fullscreen analytics

⚠️ Partial / External​

  • Browser-specific implementation details require custom handling
  • Embedded context support requires custom implementation

Feature Classification​

Core Feature - Fundamental functionality required for basic chart operation

Dependencies​

  • Requires backend? No
  • Requires storage? Yes (for persistence)
  • Requires real-time data? No
  • Requires UI controls? Yes (fullscreen button)

Missing Implementation Analysis​

The fullscreen functionality is fully implemented and production-ready. All core fullscreen capabilities are present in the codebase with proper error handling and security considerations.

Consistency Validation​

The fullscreen 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: Fullscreen button, ESC key handling, visual feedback
  • API exposes: toggleFullscreen(), enterFullscreen(), exitFullscreen(), isFullscreen() methods
  • Must implement manually: Custom fullscreen container logic

User Flow​

  1. User clicks fullscreen button or presses ESC
  2. ChartApi validates fullscreen capability
  3. ChartStore updates fullscreen state
  4. FullscreenManager calls browser API
  5. Browser enters fullscreen
  6. Canvas renders in fullscreen
  7. UI updates visual indicator
  8. User presses ESC or clicks exit button
  9. FullscreenManager exits fullscreen
  10. ChartStore updates state
  11. Canvas returns to normal size
  12. UI updates visual indicator

Integration with Existing Docs​

This feature should be linked from:

  • Charting section → Top Toolbar
  • API Reference → ChartApi
  • Getting Started → Quick Start Guide
  • Advanced Features → Appearance Management