Hooks Overview

react-klinecharts ships two kinds of hooks:

• Lifecycle hooks mirror the declarative sub-components and are useful when you want the behavior without rendering a child (useIndicator, useOverlay, useYAxis).
• State-tracking hooks subscribe to chart actions and re-render the host component when the tracked value changes.

Lifecycle hooks

Hook	Returns	Manages
useIndicator	Nullable<string> (id)	Indicator create/override/remove.
useOverlay	Nullable<string> | Array	Overlay create/override/remove.
useYAxis	Nullable<string> (id)	Standalone Y axis create/override/remove.

State-tracking hooks

These re-render the host component when the tracked value changes. They return null (or []) before the chart has initialized.

Hook	Returns	Re-renders on
useKLineChart	Chart | null	(static — context read)
useCrosshair	Crosshair | null	onCrosshairChange
useVisibleRange	VisibleRange | null	onVisibleRangeChange
useBarSpace	BarSpace | null	onVisibleRangeChange (covers zoom/resize)
useDataList	KLineData[] | null	onVisibleRangeChange
usePane	PaneOptions[] | Nullable<PaneOptions>	onVisibleRangeChange
useYAxes	YAxis[]	onVisibleRangeChange

Event subscription

Hook	Description
useChartEvent	Subscribe to any chart action with a typed, ref-stable callback.

Common patterns

function CrosshairInfo() {
  const chart = useKLineChart();
  const crosshair = useCrosshair();
  const range = useVisibleRange();

  if (!chart) return <span>Loading…</span>;
  return (
    <span>
      {crosshair?.kLineData?.close ?? "—"} · view {range?.from}..{range?.to}
    </span>
  );
}

All hooks must be called inside a <KLineChart> tree (they read the chart from context).