mmflow Charts
Performance
Use the WebGL chart engine, columnar candle path, autosize behavior, and benchmark route to validate embeds under heavy data.
Benchmark the renderer
The developer benchmark route exercises the WebGL renderer with large synthetic OHLCV sets. Use it before making product claims about dataset size, FPS, or latency. Numbers from that route are measured in the current browser/session.
import { createChart } from "@mmflow/charts";
const chart = createChart({
container,
autosize: true,
devicePixelRatio: window.devicePixelRatio,
perf: true,
});Benchmark methodology
Treat the benchmark as a local measurement harness, not a universal published score.
What it measures
Synthetic typed-array OHLCV backfill plus one synthetic update per animation frame through the WebGL chart path.
What it does not measure
Exchange latency, live source freshness, network transport, host app complexity, or every browser and GPU class.
How to report results
Record candle count, browser, device, display refresh rate, power mode, FPS, and load time together.
Memory caveat
Large candle counts intentionally allocate large typed arrays; memory pressure from other tabs can affect results.
Practical guidance
Keep the host layout stable and feed the engine data in the shape it already supports.
Use autosize carefully
Autosize observes the container. Give the parent stable dimensions to avoid layout churn.
Prefer columnar candles
fetchCandlesColumns is optional but useful when your backend already returns OHLCV columns.
Throttle host work
Keep expensive React or Vue state updates outside the high-frequency chart render path.
Measure before claiming
Use benchmark results, build output, and browser audits for any public performance statement.
Continue building
Move through the chart SDK docs without leaving the developer flow.