Anatomy — overview

EliteChart presents nine distinct UI regions, each with its own responsibilities, keyboard targets, and customisation hooks. This section drills into every one. Start here for the bird's-eye view.

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

EliteChart's chrome is composed of nine fixed regions arranged around the central chart area. The layout is viewport-clamped — every dimension uses clamp(min, vw, max) so the workspace breathes from a 14" laptop to a 32" monitor without going sloppy at either end.

The chrome is opt-out, not opt-in. Phase 1b lands the bars={{ top, left, right, bottom }} prop for hiding individual regions; until then, hide via CSS — see customize-toolbar for the full recipe.

Regions

Variations

Hide every chrome region (chart-only mode)

/* your-app.css */
header[role="banner"],
nav[aria-label="Drawing tools"],
aside[aria-label="Sidebar"],
footer[role="contentinfo"] {
  display: none !important;
}

Power-user-only — hide the bottom drawer until invoked

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

function CompactWorkspace() {
  useEffect(() => useUIStore.getState().setBottomTab(null), []);
  return null;
}

API

Related

• Chart area
• Interactions
• Customize the toolbar