Top bar

The top bar is the primary command surface. Every action that changes the chart's "what" — symbol, timeframe, indicators, compare — lives here.

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 top bar is divided into three logical groups, left to right.

Left group — symbol selection. The symbol pill opens the Symbol Search modal (/ keybinding). The current symbol is also displayed in the watermark behind the bars.

Middle group — chart controls. Resolution selector (1m, 5m, 1h, 1d, …), series-kind selector (candle / line / area / HA / Renko), Indicators button (opens the indicator catalogue modal), Compare button (overlay multi-symbol).

Right group — workspace controls. Layouts (multi-chart), Alerts manager, Replay toggle, Settings, theme toggle (sun/moon), About + Hotkeys.

Variations

Programmatically change the symbol

import { useEffect } from 'react';
import { EliteChart, useChartStore } from '@elitechart/elitechart';

export default function ProductPage({ symbol }: { symbol: string }) {
  useEffect(() => {
    useChartStore.getState().setSymbol(symbol);
  }, [symbol]);
  return <EliteChart />;
}

Lock the resolution

Hide the resolution selector with CSS, then drive timeframe via the prop:

[data-cf-region="resolution"] { display: none; }

<EliteChart symbol="ETHUSD" timeframe="15m" />

API

Related

• Modals — Symbol Search, Indicators, Settings
• Resolutions
• Customize the toolbar