mmflow Charts
Custom indicators
Author pure indicator compute functions with typed params, then attach the returned IndicatorInstance to React, Vue, or the imperative chart API.
defineIndicator
import { defineIndicator } from "@mmflow/charts";
export const closeDeltaStudy = defineIndicator({
name: "Close delta",
overlay: false,
params: {
color: { type: "color", label: "Color", default: "#57c2f2" },
},
compute(candles, params) {
const data = Array.from({ length: candles.length }, (_, i) => {
if (i === 0) return NaN;
return candles.close[i] - candles.close[i - 1];
});
return {
lines: [{ id: "close-delta", data, color: params.color }],
};
},
});Attach to Chart
import { Chart } from "@mmflow/react";
import { closeDeltaStudy } from "./closeDeltaStudy";
export function CustomIndicatorChart() {
return (
<Chart
symbol="BTC"
indicators={[closeDeltaStudy()]}
style={{ height: 520 }}
/>
);
}Formula scripts
Use ChartScript when users need a small safe formula editor instead of writing TypeScript indicator modules.
compileChartScript
import { compileChartScript } from "@mmflow/charts";
const compiled = compileChartScript(`
basis = sma(close, 20)
dev = stdev(close, 20) * 2
plot basis
plot basis + dev
plot basis - dev
`, { name: "Bands" });
const indicators = compiled.ok ? [compiled.indicator] : [];Authoring contract
Custom indicators are pure compute functions over a CandleView. They should not fetch, mutate DOM, or depend on chart renderer internals.
params
Use number, int, bool, color, or select ParamSpec values to describe configurable inputs.
compute(candles, params)
Return lines, histogram, or bands from close, high, low, open, volume, and time arrays.
overlay
Use overlay: true for price-pane studies and overlay: false for sub-pane studies.
Continue building
Move through the chart SDK docs without leaving the developer flow.