Skip to content
EliteChart

Headless mode

Skip the EliteChart chrome — mount the engine directly with @elitechart/core or @elitechart/react.

If EliteChart's toolbar, sidebars, and modals are too much chrome for your product, drop down to @elitechart/core or @elitechart/react and mount only the canvas. Same data contracts, same indicators, same drawings — your chrome.

Quick example — vanilla TS

code
import { createChart, asPrice, asTimestampMs, asVolume } from '@elitechart/core';
import { darkTheme, applyTheme } from '@elitechart/themes';

const container = document.getElementById('chart')!;
applyTheme(container, darkTheme);

const chart = createChart(container, { autosize: true });
chart.setTheme(darkTheme);
chart.setBars([
  {
    time: asTimestampMs(Date.now()),
    open: asPrice(100),
    high: asPrice(105),
    low:  asPrice(99),
    close: asPrice(104),
    volume: asVolume(1_200),
  },
]);

Quick example — React

code
'use client';
import { useRef } from 'react';
import { Chart, useChart, useChartTheme } from '@elitechart/react';
import { darkTheme, lightTheme } from '@elitechart/themes';

export function HeadlessChart() {
  const ref = useRef<HTMLDivElement>(null);
  const handle = useChart(ref);
  const [theme, setTheme] = useChartTheme(handle, darkTheme);

  return (
    <>
      <button onClick={() => setTheme(theme === darkTheme ? lightTheme : darkTheme)}>
        Toggle
      </button>
      <Chart ref={ref} options={{ autosize: true }} className="h-96 w-full" />
    </>
  );
}
View source on GitHub →

How it works

createChart(container, options) returns a ChartHandle. The handle is the full programmatic API — setBars, setTheme, addIndicator, addDrawing, subscribe, dispose. Nothing else mounts; you own every wrapper element.

@elitechart/react is a thin convenience layer around the same handle — a <Chart /> ref-mountable component plus useChart() and useChartTheme() hooks.

Variations

Add an indicator headlessly

code
import { rsi } from '@elitechart/indicators/rsi';
chart.addIndicator(rsi({ period: 14 }));

Tear down on unmount

code
chart.dispose();

API

SymbolFromReturns
createChart(container, options)@elitechart/coreChartHandle
<Chart ref options />@elitechart/reactReact component
useChart(ref)@elitechart/reactChartHandle | null
useChartTheme(handle, initial)@elitechart/react[theme, setTheme]