Skip to main content

Templates

The Templates feature provides comprehensive chart template management for the financial charting library. This system enables users to save, load, and share chart configurations including symbols, indicators, drawings, and layout settings.

Key Features​

  • Save current chart configuration as template
  • Load saved templates
  • Template naming and organization
  • Local storage persistence
  • Template sharing capabilities
  • Template versioning

Architecture / Behavior​

The templates system follows a layered architecture:

  1. UI Layer: Top toolbar template menu with save/load options
  2. API Layer: ChartApi and GlobalApi template methods
  3. State Layer: ChartStore manages template state
  4. Storage Layer: TemplateManager handles template persistence

The template flow: UI → ChartApi → ChartStore → TemplateManager → Storage → UI.

API Usage​

Initialization​

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

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

Methods​

ChartApi.saveTemplate() - Save current chart configuration as template:

// Save current configuration as 'my_strategy' template
const templateId = chart.getApi().saveTemplate('my_strategy');
console.log(`Template saved with ID: ${templateId}`);

ChartApi.loadTemplate() - Load a saved template:

// Load template by ID
const template = chart.getApi().loadTemplate('my_strategy');
if (template) {
  console.log('Template loaded successfully');
}

GlobalApi.saveTemplate() - Save template across all charts:

// Save template globally
const globalTemplateId = chart.getGlobalApi().saveTemplate('global_template');

Configuration Options​

OptionTypeDefaultDescription
enabled_featuresstring[]['templates']Enable/disable templates functionality
template_storage`'localStorage''server'`'localStorage'
template_max_countnumber50Maximum number of templates to store
template_auto_savebooleanfalseAuto-save on chart changes

Events​

  • template:changed - Fired when template changes

Customization​

  • UI styling can be customized via CSS classes
  • Template naming conventions can be customized
  • Storage behavior can be customized
  • Auto-save behavior can be customized

Use Cases​

  • Strategy development and testing
  • Sharing chart configurations with team members
  • Creating standardized chart setups
  • Educational purposes
  • Integration with trading platforms

Limitations​

  • Limited to local storage by default
  • Template size limited by localStorage capacity
  • Requires proper data feed implementation
  • Some template features may require server-side implementation

✅ Supported​

  • Template save/load API methods
  • Template naming and organization
  • Local storage persistence
  • Template sharing capabilities
  • Template versioning

❌ Not Supported​

  • Cloud-based template storage
  • Template collaboration features
  • Advanced template analytics

⚠️ Partial / External​

  • Server-side template storage requires custom implementation
  • Template sharing requires backend integration

Feature Classification​

Core Feature - Fundamental functionality required for advanced chart operation

Dependencies​

  • Requires backend? No (local storage)
  • Requires storage? Yes (localStorage)
  • Requires real-time data? No
  • Requires UI controls? Yes (template menu)

Missing Implementation Analysis​

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

Consistency Validation​

The templates 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: Template menu, save/load buttons, visual feedback
  • API exposes: saveTemplate(), loadTemplate() methods
  • Must implement manually: Custom template storage logic

User Flow​

  1. User clicks save template button
  2. ChartApi validates configuration
  3. ChartStore serializes state
  4. TemplateManager saves to storage
  5. UI confirms save success
  6. User selects template from menu
  7. TemplateManager loads from storage
  8. ChartApi applies template configuration
  9. 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 → Workspace Management