Modals

EliteChart surfaces five chart-wide configuration modals. Each is keyboard-openable, focus-trapped, dismissible with Esc, and returns focus to the trigger on close.

How it works

Modals render into a single portal at the application root. Only one is visible at a time; opening a second auto-closes the first. State lives in useUIStore.activeModal — your own code can open or close any modal programmatically.

The five modals

Symbol Search (/) — type to query the datafeed's searchSymbols, arrow keys to navigate, Enter to select. Recent symbols appear at the top.

Indicators (fx button) — the catalogue of every available indicator. Search, select, configure. Adding to the chart updates useChartStore.indicators and triggers a re-paint.

Settings (cog icon) — three tabs. Appearance wraps the theme tokens for session-only overrides. Defaults sets the initial symbol / timeframe / kind. Trading configures the bottom-bar trading panel.

About (? button) — version + license + GitHub link. Lightweight.

Hotkeys (Shift-?) — full keybinding reference. Identical content to the keyboard-shortcuts page, in a modal.

Variations

Open Symbol Search programmatically

import { useUIStore } from '@elitechart/elitechart';
useUIStore.getState().setActiveModal('symbol-search');

Disable a modal

Hide its trigger and intercept the keybinding:

[data-cf-modal-trigger="settings"] { display: none; }

useEffect(() => {
  const handler = (e: KeyboardEvent) => {
    if (e.key === ',' && (e.metaKey || e.ctrlKey)) e.stopPropagation();
  };
  window.addEventListener('keydown', handler, true);
  return () => window.removeEventListener('keydown', handler, true);
}, []);

API

Related

• Top bar
• Keyboard shortcuts
• Indicators