Skip to main content

Export

The Export feature provides comprehensive chart export capabilities for the financial charting library. This system enables users to export charts in various formats including images, PDF documents, and data exports.

Key Features​

  • Image export (PNG, JPEG, SVG)
  • Document export (PDF)
  • Data export (JSON, CSV)
  • Customizable export options
  • Quality settings management
  • Batch export capabilities
  • Template support
  • Async processing
  • Progress tracking
  • Error handling and recovery

Architecture / Behavior​

The export system follows a layered architecture:

  1. UI Layer: Top toolbar export button and modal
  2. API Layer: ChartApi and GlobalApi export methods
  3. State Layer: ChartStore manages export state
  4. Rendering Layer: ExportEngine handles export rendering

The export flow: UI → ChartApi → ChartStore → ExportEngine → Canvas → Browser → UI.

API Usage​

Initialization​

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

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

Methods​

ChartApi.takeScreenshot() - Take screenshot of the chart:

// Take PNG screenshot
const pngDataUrl = await chart.getApi().takeScreenshot({ format: 'png' });

// Take JPEG screenshot with quality setting
const jpegDataUrl = await chart.getApi().takeScreenshot({ 
  format: 'jpeg', 
  quality: 0.9 
});

// Take SVG screenshot
const svgDataUrl = await chart.getApi().takeScreenshot({ format: 'svg' });

ChartApi.saveAsPNG() - Save chart as PNG file:

// Save as PNG with default options
await chart.getApi().saveAsPNG();

// Save as PNG with custom options
await chart.getApi().saveAsPNG({
  includeWatermark: true,
  includeLegend: true,
  theme: 'dark'
});

ChartApi.saveAsSVG() - Save chart as SVG file:

// Save as SVG
await chart.getApi().saveAsSVG();

ChartApi.copyToClipboard() - Copy chart image to clipboard:

// Copy to clipboard
await chart.getApi().copyToClipboard();

Configuration Options​

OptionTypeDefaultDescription
enabled_featuresstring[]['export']Enable/disable export functionality
export_qualitynumber0.95Default export quality (0.0-1.0)
export_watermarkbooleantrueInclude watermark in exported images
export_legendbooleantrueInclude legend in exported images

Events​

No export-specific events are implemented. Export operations use standard promise-based async patterns.

Customization​

  • UI styling can be customized via CSS classes
  • Export quality can be customized per export
  • Watermark text can be customized
  • Legend display can be customized
  • File naming can be customized

Use Cases​

  • Creating reports and presentations
  • Sharing chart images with colleagues
  • Technical analysis documentation
  • Trading strategy development
  • Integration with trading platforms

Limitations​

  • Requires sufficient browser permissions
  • Some export formats may not be supported on all browsers
  • Performance depends on chart complexity
  • Large charts may require more memory

✅ Supported​

  • Image export (PNG, JPEG, SVG)
  • Export quality control
  • Watermark inclusion
  • Legend inclusion
  • Clipboard export
  • Progress tracking

❌ Not Supported​

  • PDF export
  • CSV data export
  • JSON data export
  • Advanced document formatting

⚠️ Partial / External​

  • PDF export requires external library integration
  • Data export requires custom implementation
  • Advanced formatting requires custom implementation

Feature Classification​

Core Feature - Fundamental functionality required for basic chart operation

Dependencies​

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

Missing Implementation Analysis​

The image export functionality is fully implemented and production-ready. However, data export (CSV/JSON) and PDF export are documented but not found in the codebase.

Consistency Validation​

The export 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: Export button, modal, quality selector, format selector
  • API exposes: takeScreenshot(), saveAsPNG(), saveAsSVG(), copyToClipboard() methods
  • Must implement manually: PDF export, CSV/JSON export

User Flow​

  1. User clicks export button
  2. ChartApi validates export capability
  3. ChartStore initializes export state
  4. ExportEngine captures canvas
  5. Browser processes export
  6. User saves or copies image

Integration with Existing Docs​

This feature should be linked from:

  • Charting section → Top Toolbar
  • API Reference → ChartApi
  • Getting Started → Quick Start Guide
  • Advanced Features → Reporting & Sharing