Skip to content
EliteChart

Multi-chart layouts

Split-screen, 2×2, side-by-side — every Phase-1b layout pattern, plus the v1 workaround.

The Layouts button in the top bar will surface 1 / 2H / 2V / 4 split modes in Phase 1b — see reference/roadmap. Until then, render multiple <EliteChart /> instances yourself.

Quick example — 2×2 grid

code
'use client';
import { EliteChart } from '@elitechart/elitechart';
import '@elitechart/elitechart/styles.css';

export default function Quad() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', height: '100vh', gap: 4 }}>
      <EliteChart symbol="BTCUSD" timeframe="1h" />
      <EliteChart symbol="ETHUSD" timeframe="1h" />
      <EliteChart symbol="SOLUSD" timeframe="1h" />
      <EliteChart symbol="AAPL"   timeframe="1d" />
    </div>
  );
}

How it works

Each <EliteChart /> mounts an independent engine, with its own stores and persistence keys. They don't share state today; v1.1 lands the useSharedStore flag for syncing crosshair / theme across instances.

Performance scales linearly — four charts at 1080p hold the 60 fps budget on M1 / Ryzen-class CPUs.

Variations

Locked timeframe across the grid

code
const tf = '1h';
<EliteChart symbol="BTCUSD" timeframe={tf} />
<EliteChart symbol="ETHUSD" timeframe={tf} />

Side-by-side — 2 columns, full height

code
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', height: '100vh' }}>
  <EliteChart symbol="BTCUSD" timeframe="1h" />
  <EliteChart symbol="ETHUSD" timeframe="1h" />
</div>

API

PatternNotes
Independent enginesone Zustand store set per instance
Shared crosshairPhase 1.1 — useSharedStore flag
Shared themeworks today via top-level MessagesProvider