Bottom bar

The bottom bar is a docked drawer with a thin tab strip. Pick a tab, the drawer expands. The same drawer hosts every panel that needs horizontal real estate — trading, screening, strategy testing, notes.

Quick example

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

export default function Page() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <EliteChart symbol="BTCUSD" timeframe="1h" />
    </div>
  );
}

How it works

The strip surfaces six default tabs:

1. Trading Panel — order ticket, positions, account state. Wired through the Broker contract.
2. Strategy Tester — backtest a strategy and inspect the equity curve. Phase 2 — see reference/roadmap.
3. Stock Screener — multi-symbol filterable table.
4. Crypto Screener — same surface, different default columns.
5. Forex Screener — same surface, currency-pair columns.
6. Notes — per-chart markdown notes, persisted via the persistence layer.

Tabs are addressable by id — setBottomTab('trading-panel') works the same as clicking the tab. Closing the drawer is setBottomTab(null).

The drawer height is --bottom-drawer-h; the strip height when collapsed is --bottombar-h. Both vw-clamped.

Variations

Open Trading Panel on first paint

import { useEffect } from 'react';
import { useUIStore } from '@elitechart/elitechart';

function ChartWithTradingOpen() {
  useEffect(() => {
    useUIStore.getState().setBottomTab('trading-panel');
  }, []);
  return null;
}

Hide the drawer entirely

footer[role="contentinfo"] { display: none; }

API

Related

• Paper trading recipe
• Broker contract
• Anatomy: overview