Skip to main content

Multi Layout

The Multi Layout feature provides comprehensive grid configuration capabilities for the financial charting library. This system enables users to organize their charting workspace with various multi-panel grid arrangements including horizontal, vertical, and complex layouts.

Key Features​

  • Multiple grid configurations (1, 2h, 2v, 3, 4, 6, 8, 9, 12 panels)
  • Horizontal and vertical panel arrangements
  • Complex grid layouts (1l2r, 2l1r, 1+3, 3+1, etc.)
  • Real-time layout switching
  • Responsive design for different screen sizes

Architecture / Behavior​

The Multi Layout feature is implemented as a grid configuration system that provides various multi-panel arrangements:

  1. UI Layer: Top toolbar layout selector dropdown (visual interface)
  2. API Layer: GlobalApi.createLayout() method for grid configuration changes
  3. State Layer: GlobalStore manages current grid configuration
  4. Rendering Layer: LayoutManager handles grid rendering

The multi-layout flow: User selects grid configuration → GlobalApi.createLayout() → GlobalStore updates grid state → LayoutManager renders new grid → Canvas displays updated layout.

API Usage​

Initialization​

The multi-layout feature is enabled by default in the chart configuration:

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

Methods​

GlobalApi.createLayout() - Create a new grid configuration:

// Create 1-panel layout (single chart)
chart.getApi().createLayout('1');

// Create 2-panel horizontal layout
chart.getApi().createLayout('2h');

// Create 2-panel vertical layout
chart.getApi().createLayout('2v');

// Create 3-panel layout (1 left, 2 right)
chart.getApi().createLayout('1l2r');

// Create 4-panel layout (2x2 grid)
chart.getApi().createLayout('4');

// Create 6-panel layout (2x3 grid)
chart.getApi().createLayout('6');

// Create 8-panel layout (4x2 grid)
chart.getApi().createLayout('8');

// Create 9-panel layout (3x3 grid)
chart.getApi().createLayout('9');

// Create 12-panel layout (4x3 grid)
chart.getApi().createLayout('12');

Configuration Options​

OptionTypeDefaultDescription
layoutLayoutType'1'Default grid configuration
enabled_featuresstring[]['multi_layout']Enable/disable multi-layout functionality
layout_persistencebooleantrueSave grid configuration to localStorage
layout_max_panelsnumber12Maximum number of panels (based on LayoutType enum)

Events​

  • layout:changed - Fired when grid configuration changes

Customization​

  • UI styling can be customized via CSS classes
  • Layout presets can be customized through configuration
  • Sync behavior can be customized per panel
  • Panel appearance can be customized

Use Cases​

  • Creating different workspace configurations for various trading strategies
  • Setting up horizontal or vertical chart comparisons
  • Building complex multi-panel dashboards
  • Responsive trading setups for different screen sizes
  • Quick switching between different grid arrangements

Limitations​

  • Limited to maximum 12 panels (based on LayoutType enum)
  • Some grid configurations may not be supported on very small screens
  • Performance depends on number of panels and chart complexity
  • Requires proper data feed implementation for all panels

✅ Supported​

  • Grid configuration API methods
  • Layout state management
  • Real-time grid switching
  • Visual feedback for current grid configuration
  • Immediate grid application without page reload

Feature Classification​

UI Feature - Provides user interface controls for grid configuration selection and switching

Dependencies​

  • Requires backend? No
  • Requires storage? Yes (for grid persistence)
  • Requires real-time data? No
  • Requires UI controls? Yes (layout selector in top toolbar)

Missing Implementation Analysis​

The Multi Layout feature is fully implemented and production-ready. All core grid configuration capabilities are present in the codebase with proper error handling and performance optimizations. The implementation follows TradingView's design patterns for immediate grid switching.

Consistency Validation​

The Multi Layout API follows the same pattern as other UI features with consistent event-based return values and error handling. Naming conventions are consistent with other features, using createLayout() method name.

UI vs API Separation​

  • UI handles: Layout selector dropdown in top toolbar, visual feedback for current grid configuration
  • API exposes: GlobalApi.createLayout() method for grid configuration changes
  • Must implement manually: Custom grid persistence logic

User Flow​

  1. User selects grid configuration from top toolbar dropdown
  2. GlobalApi.createLayout() validates and processes grid type
  3. GlobalStore updates grid state
  4. LayoutManager renders new grid configuration
  5. Canvas displays updated layout
  6. UI provides visual feedback for current grid configuration

Integration with Existing Docs​

This feature should be linked from:

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