Quick Start

This page builds the smallest possible working chart: a datafeed, the provider, and a chart view. The demo below is live — it streams real Binance data over WebSocket.

1. Implement a datafeed

The datafeed is your bridge to market data. Implement three required methods — getHistoryKLineData, subscribe, unsubscribe — plus the optional searchSymbols (used by useSymbolSearch; skip it if you don’t need symbol search). See the Datafeed reference for the full contract.

import type { Datafeed } from "react-klinecharts-ui";

export const datafeed: Datafeed = {
  // Optional — powers useSymbolSearch. Returns matching symbols.
  async searchSymbols(query) {
    /* return matching symbols */
  },
  async getHistoryKLineData(symbol, period, from, to) {
    /* return historical bars */
  },
  subscribe(symbol, period, callback) {
    /* push live bars to callback */
  },
  unsubscribe(symbol, period) {
    /* stop the stream */
  },
};

2. Wrap your app in the provider

import { KlinechartsUIProvider } from "react-klinecharts-ui";
import { datafeed } from "./datafeed";

export function App() {
  return (
    <KlinechartsUIProvider
      datafeed={datafeed}
      defaultSymbol={{ ticker: "BTCUSDT", pricePrecision: 2 }}
      defaultTheme="dark"
    >
      <ChartView />
    </KlinechartsUIProvider>
  );
}

3. Render the chart

createDataLoader adapts your datafeed to klinecharts; useKlinechartsUI exposes state and dispatch.

import { useMemo } from "react";
import { KLineChart } from "react-klinecharts";
import { useKlinechartsUI, createDataLoader } from "react-klinecharts-ui";

function ChartView() {
  const { state, dispatch, datafeed } = useKlinechartsUI();
  const dataLoader = useMemo(
    () => createDataLoader(datafeed, dispatch),
    [datafeed, dispatch],
  );

  return (
    <KLineChart
      dataLoader={dataLoader}
      symbol={state.symbol ?? undefined}
      period={state.period}
      styles={state.theme}
      onReady={(chart) => dispatch({ type: "SET_CHART", chart })}
    />
  );
}

Or: use ChartCanvas (less boilerplate)

The above onReady → dispatch SET_CHART bridge is the only thing connecting a renderer to the provider. If you use react-klinecharts, the optional ChartCanvas wrapper from react-klinecharts-ui/chart does that wiring for you:

import { KlinechartsUIProvider } from "react-klinecharts-ui";
import { ChartCanvas } from "react-klinecharts-ui/chart";

<KlinechartsUIProvider datafeed={datafeed} defaultSymbol={symbol}>
  <ChartCanvas className="h-[500px]" />
</KlinechartsUIProvider>;

Renderer-agnostic

react-klinecharts-ui is headless — it works with any klinecharts Chart instance. The three valid ways to get one into the store are: ChartCanvas, <KLineChart> + the onReady bridge (shown above), or a direct klinecharts.init() + dispatch({ type: "SET_CHART", chart }). The hooks only care about the Chart in the store, not who created it.

Result

That’s the whole foundation. Every other feature — indicators, drawing tools, order lines, alerts — is a hook you call inside the provider. Continue with the Concept page to understand how the pieces fit together.