Right sidebar

The right sidebar is a collapsible rail of five independent panels. Click an icon to expand the panel; click again to collapse back to the rail.

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 five panels, top to bottom in the rail:

1. Watchlist — a user-defined symbol list. Click a row to swap the chart's active symbol. Drag rows to reorder. Right-click for the per-row context menu (delete, set alert, open settings).
2. Alerts — every active price + anchored alert. See concepts/alerts-model for the data contract.
3. Hotlist — top movers / volume leaders. Sourced from your datafeed; the panel renders whatever your searchSymbols returns tagged with metric: 'hotlist'.
4. News — symbol-scoped news feed. Disabled by default; opt in via useUIStore.setNewsEnabled(true).
5. Data Window — the OHLC + indicator readouts at the current crosshair position. Updates on every pointer move.

The rail width is --rightbar-rail-w (~36px); the expanded panel width is --rightbar-panel-w (~280px). Both are vw-clamped — see concepts/themes-tokens.

Variations

Open the Watchlist on first paint

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

function ChartWithWatchlistOpen() {
  useEffect(() => {
    useUIStore.getState().setRightPanel('watchlist');
  }, []);
  return null;
}

Hide the rail entirely

aside[aria-label="Sidebar"] { display: none; }

API

Related

• Alerts model
• Customize Watchlist
• Anatomy: overview