Trading charts, built for production.

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

export default function Page() {
  return <EliteChart symbol="BTCUSD" timeframe="1h" />;
}

const setKind = useChartStore((s) => s.setKind);

setKind('candle');
setKind('bar');
setKind('line');
setKind('area');

const setTimeframe = useChartStore((s) => s.setTimeframe);

setTimeframe('1m');
setTimeframe('5m');
setTimeframe('15m');
setTimeframe('1h');
setTimeframe('4h');
setTimeframe('1D');
setTimeframe('1W');

const setActiveTool = useUIStore((s) => s.setActiveTool);

setActiveTool('cursor');
setActiveTool('trend-line');
setActiveTool('ray');
setActiveTool('fib-retracement');
setActiveTool('rectangle');
setActiveTool('ellipse');
setActiveTool('text');

const setSidebarPanel = useUIStore((s) => s.setSidebarPanel);
const setBottomTab = useUIStore((s) => s.setBottomTab);

setSidebarPanel('watchlist');  // right rail on
setBottomTab('trading-panel'); // bottom strip on
setSidebarPanel(null);          // chart only

const setThemeMode = useUIStore((s) => s.setThemeMode);

setThemeMode('dark');
setThemeMode('light');

// or fine-grained:
chart.patchTheme({ seriesUp: '#22c55e' });