Skip to main content

Layouts

The Layouts feature provides comprehensive workspace management capabilities for the financial charting library. This system enables users to save, load, and manage multiple charting workspace configurations across sessions.

Key Features​

  • Multiple saved layout configurations (up to 12 panels)
  • Layout saving and loading system
  • Auto-save functionality
  • Layout update and management
  • Layout persistence across sessions
  • Visual layout management interface

Architecture / Behavior​

The Layouts feature is implemented as a workspace management system that provides layout persistence and management:

  1. UI Layer: Top toolbar "LAYOUTS" menu with save/load/update controls
  2. API Layer: GlobalApi layout methods for saving/loading layouts
  3. State Layer: GlobalStore manages saved layout configurations
  4. Storage Layer: LayoutAdapter handles layout persistence

The layout flow: User interacts with LAYOUTS menu → GlobalApi methods → GlobalStore updates layout state → LayoutAdapter saves/loads layouts → UI displays saved layouts.

API Usage​

Initialization​

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

const chart = Chart.create(document.getElementById('container'), {
  // ... other options
  layout: '4', // Default layout (2x2 grid)
  enabled_features: ['layout'], // Enable layout functionality
});

Methods​

GlobalApi.saveLayout() - Save current layout configuration:

// Save current layout with name
await chart.getApi().saveLayout('My Trading Setup');

// Save current layout with auto-generated name
await chart.getApi().saveLayout();

GlobalApi.loadLayout() - Load a saved layout configuration:

// Load layout by ID
await chart.getApi().loadLayout('layout-12345');

// Load layout by name (if supported)
await chart.getApi().loadLayout('My Trading Setup');

GlobalApi.removeLayout() - Remove a saved layout configuration:

// Remove layout by ID
await chart.getApi().removeLayout('layout-12345');

GlobalApi.getLayouts() - Get list of all saved layouts:

// Get all saved layouts
const layouts = await chart.getApi().getLayouts();
console.log(`Saved layouts: ${layouts.length}`);

GlobalApi.autosaveLayout() - Auto-save current layout:

// Auto-save current layout
await chart.getApi().autosaveLayout();

Configuration Options​

OptionTypeDefaultDescription
enabled_featuresstring[]['layout']Enable/disable layout functionality
layout_persistencebooleantrueSave layouts to localStorage
autosave_enabledbooleanfalseEnable auto-save for current layout
max_saved_layoutsnumber10Maximum number of saved layouts to store

Events​

  • layout:changed - Fired when layout changes
  • layout:saved - Fired when layout is saved
  • layout:loaded - Fired when layout is loaded
  • layout:removed - Fired when layout is removed

Customization​

  • UI styling can be customized via CSS classes
  • Layout presets can be customized through configuration
  • Panel sizing behavior can be customized
  • Layout persistence can be customized

Use Cases​

  • Creating and saving multiple workspace configurations
  • Switching between different trading setups
  • Sharing layout configurations with team members
  • Preserving complex chart arrangements across sessions
  • Quick setup for different market conditions

Limitations​

  • Limited to maximum 10 saved layouts (configurable)
  • Some layouts may not be supported on very small screens
  • Performance depends on number of saved layouts and chart complexity
  • Requires proper data feed implementation for all panels

✅ Supported​

  • Layout saving and loading API methods
  • Layout state management
  • Layout persistence across sessions
  • Auto-save functionality
  • Layout management interface

Feature Classification​

Core Feature - Fundamental workspace management functionality required for professional trading setups

Dependencies​

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

Missing Implementation Analysis​

The Layouts feature is fully implemented and production-ready. All core workspace management capabilities are present in the codebase with proper error handling and performance optimizations. The implementation follows TradingView's design patterns for layout persistence and management.

Consistency Validation​

The Layouts API follows the same pattern as other core features with consistent promise-based return values and error handling. Naming conventions are consistent with other features, using saveLayout(), loadLayout(), getLayouts() method names.

UI vs API Separation​

  • UI handles: "LAYOUTS" menu in top toolbar, layout management interface, visual feedback for saved layouts
  • API exposes: GlobalApi.saveLayout(), loadLayout(), getLayouts(), removeLayout(), autosaveLayout() methods
  • Must implement manually: Cloud-based layout storage logic

User Flow​

  1. User opens "LAYOUTS" menu in top toolbar
  2. GlobalApi methods handle layout saving/loading operations
  3. GlobalStore manages saved layout configurations
  4. LayoutAdapter handles storage persistence
  5. UI displays saved layouts and management options
  6. User interacts with layout management interface

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