Skip to content
EliteChart

Customize the Watchlist

Seed default symbols, sync rows with your app, override the per-row context menu.

The Watchlist sits in the right sidebar and is fully controllable from your app — seed symbols, react to row clicks, sync with external state.

Quick example

code
'use client';
import { useEffect } from 'react';
import { EliteChart, useChartStore } from '@elitechart/elitechart';
import '@elitechart/elitechart/styles.css';

export default function Page() {
  useEffect(() => {
    useChartStore.getState().setWatchlist([
      'BTCUSD', 'ETHUSD', 'SOLUSD', 'AAPL', 'TSLA',
    ]);
  }, []);
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <EliteChart symbol="BTCUSD" timeframe="1h" />
    </div>
  );
}

How it works

The Watchlist is backed by useChartStore.watchlist — a flat array of symbol ids. Mutating that array re-renders the panel. Row click calls setSymbol(id), which updates the chart.

Variations

Sync with an external "favourites" store

code
const favourites = useFavourites(); // your hook
useEffect(() => {
  useChartStore.getState().setWatchlist(favourites);
}, [favourites]);

Listen for symbol-row clicks

code
useChartStore.subscribe((s, prev) => {
  if (s.symbol !== prev.symbol) {
    fetch('/api/track', { method: 'POST', body: JSON.stringify({ symbol: s.symbol }) });
  }
});

API

ActionMethod
Set rowsuseChartStore.setWatchlist(ids)
Add rowuseChartStore.addToWatchlist(id)
Remove rowuseChartStore.removeFromWatchlist(id)
Active rowuseChartStore.symbol