Chart area

The chart area is the central canvas — bars, axes, crosshair, watermark, and legend. Every other UI region exists to push state into this surface or read state out of it.

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" kind="candle" />
    </div>
  );
}

How it works

The chart area is composed of five sub-surfaces, each painted on the same canvas but drawn in fixed z-order:

1. Watermark — symbol+timeframe text behind the bars. Recently added (SC-68) and clipped to the price-axis area so it never bleeds over the toolbar.
2. Grid — horizontal price-level rules, vertical time-grid rules. Both togglable through the theme tokens.
3. Series — the bars themselves (candles, line, area, Heikin-Ashi, Renko, etc.). See series for the full list.
4. Crosshair — vertical + horizontal rulers, the price/time pills, and the value labels for every visible indicator.
5. Legend — top-left overlay listing the active symbol, resolution, and indicator names.

The price axis (right edge) and time axis (bottom edge) are separately scrollable and respond independently to mouse-wheel and pinch gestures — see interactions for the full gesture vocabulary.

Variations

Hide the watermark

import { useChartStore } from '@elitechart/elitechart';
useChartStore.getState().setWatermarkVisible(false);

Hide the grid

import { useThemeStore } from '@elitechart/elitechart';
useThemeStore.getState().setGridVisible(false);

Lock the price axis to a fixed range

Phase 1b — see reference/roadmap.

API

Related

• Anatomy: overview
• Interactions
• Series