mmflow Charts

React charts

Use the typed @mmflow/react Chart component when a React product needs the chart engine without hand-wiring the imperative lifecycle.

React component

"use client";

import { Chart } from "@mmflow/react";
import { createMmflowFeed } from "@mmflow/sdk";
import { emaStudy, vwapStudy } from "@mmflow/charts";

const feed = createMmflowFeed({ transport: "sse" });

export default function MarketChart() {
  return (
    <Chart
      feed={feed}
      symbol="BTC"
      resolution="5m"
      candles
      volume
      autosize
      indicators={[emaStudy({ period: 21 }), vwapStudy()]}
      style={{ height: 560 }}
    />
  );
}

Confirmed props

These props are present on the current ChartProps type in the React binding.

feed, symbol, resolution

When feed is present, Chart calls setData with the selected market and resolution.

candles and volume

Candles default on; volume adds a sub-pane when enabled.

indicators

Pass IndicatorInstance values returned by built-in studies or custom defineIndicator factories.

theme

Pass ThemeTokens for white-label colors and typography.

autosize, className, style

Control sizing and container styles. Give the chart a real height.

onReady

Receive the imperative IChartApi when you need layer handles or screenshots.

Imperative escape hatch

onReady exposes confirmed IChartApi methods. Use it for supported order-flow layer handles, screenshots, and drawing tools without changing the declarative props.

onReady layer handles

"use client";

import { Chart } from "@mmflow/react";

export function ImperativeLayerExample() {
  return (
    <Chart
      symbol="BTC"
      style={{ height: 520 }}
      onReady={(api) => {
        api.addFootprintSeries();
        api.addVolumeProfile();
      }}
    />
  );
}

Drawing tools

React uses the same public drawing API as the framework-agnostic engine. The ChartHandle api property exposes the same surface.

onReady drawings

"use client";

import { Chart } from "@mmflow/react";

export function DrawingToolsExample() {
  return (
    <Chart
      symbol="BTC"
      style={{ height: 520 }}
      onReady={(api) => {
        api.drawings.setActiveTool("trendline");
        api.drawings.add({
          type: "horizontalLine",
          points: [{ time: Date.now(), price: 65000 }],
          style: { color: "#facc15" },
        });
      }}
    />
  );
}

Repo starter template

Copy frontend/examples/react-live-chart for a small React template using only public package imports. The template is intentionally outside the workspace build and includes local workspace linking notes for pre-registry development.

Continue building

Move through the chart SDK docs without leaving the developer flow.