Embed in a dashboard

EliteChart fills its parent — drop it into any fixed-size container and it boots. The trick is making sure the parent has a non-zero height and you've set sensible chrome defaults.

Quick example

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

export function DashboardChartCard() {
  return (
    <div style={{ width: '100%', height: 480, borderRadius: 12, overflow: 'hidden' }}>
      <EliteChart symbol="BTCUSD" timeframe="1h" />
    </div>
  );
}

How it works

The chart canvas measures the parent on mount and on every ResizeObserver tick. If the parent is 0×0 (a common gotcha inside flex / grid containers without an explicit row), nothing paints. Set an explicit height — height: 480 or height: '100%' inside a sized parent.

When embedding multiple charts on one page, each <EliteChart /> mounts an independent instance. They don't share state — every instance has its own Zustand stores via localStorage keying.

Variations

Compact mode (hide bottom drawer)

[data-elitechart-instance] footer[role="contentinfo"] { display: none; }

Per-card persistence keys

Phase 1b lands a instanceId prop. Until then, two chart instances on the same page share localStorage — usually fine, but acceptable to disable persistence on one of them:

useChartStore.persist.clearStorage();

API

Related

• Quickstart
• Customize the toolbar
• Persistence