Multichart

ChartSpire's multichart feature allows you to display multiple charts simultaneously in various layouts, enabling comprehensive market analysis across different timeframes, symbols, or perspectives.

Overview

The multichart functionality provides:

• Support for 1-16 charts displayed simultaneously
• Over 30 different layout options
• Seamless integration with synchronization features
• Configurable chart limits and transition delays

Accessing Multichart

To open the multichart interface:

1. Click the multichart button in the top toolbar
2. Select your desired layout from the modal
3. Click to confirm and apply the layout

Charts are mounted progressively to ensure smooth performance during layout transitions.

Sync Integration

Multichart works seamlessly with ChartSpire's synchronization features:

• Crosshair Sync: Move your mouse over any chart to see crosshairs on all charts
• Time Sync: Click any chart to synchronize time periods across all visible charts
• Symbol Sync: Change symbols on one chart to update all charts simultaneously
• Interval Sync: Change timeframes on one chart to apply to all charts
• Drawing Sync: Create drawings that appear across all charts with matching symbols

These sync features make multichart particularly powerful for comparative analysis and maintaining consistency across your workspace.

Configuration

Configure multichart behavior when initializing ChartSpire:

const chart = new ChartSpire({
  container: document.getElementById('chart-container'),
  symbol: {
    symbol: 'BTCUSDT',
    type: SYMBOL_TYPE.CRYPTO
  },
  // Set maximum number of charts (1-16)
  multiChartLimit: 12,
  // Set delay between chart mounting/unmounting (milliseconds)
  multiChartDelay: 250
})

Configuration Options

• multiChartLimit: Maximum number of charts allowed (1-16). Defaults to 16
• multiChartDelay: Delay in milliseconds between mounting/unmounting charts during layout transitions. Defaults to 500ms

API Methods

Access multichart information programmatically:

// Get current multichart layout number
const currentLayout = chart.getMultiChart()

// Get all available chart IDs based on limit
const allChartIds = chart.getAllChartIds()

// Get currently visible chart IDs
const visibleChartIds = chart.getVisibleChartIds()