Financial
Bar replay
Step or play the history forward from any bar, with the higher-timeframe chart following along.
Bar replay
@ortex-charts/financialLoading bar replay…
Step or play the history forward from any bar, with the higher-timeframe chart following along.
replay.ts
import { createFinancialChart, linkCharts, type ReplayState } from "@ortex-charts/financial";
import { aggregateBars, barSeriesFromRows, barSeriesToRows, parseResolution } from "@ortex-charts/math";
const weekly = barSeriesToRows(aggregateBars(barSeriesFromRows(daily), parseResolution("1W"), TIME_ZONE));
const chart = createFinancialChart(main, {
theme,
timeZone: TIME_ZONE,
resolution: "1D",
watermark: { text: SYMBOL, visible: true, fontSize: 36 },
data: daily,
});
const weeks = createFinancialChart(follower, {
theme,
timeZone: TIME_ZONE,
resolution: "1W",
volume: false,
legend: { visible: true, showValues: false },
data: weekly,
});
chart.addIndicator("ema", { length: 21 });
// Four bars a second, and the weekly chart follows the same clock.
const replay = chart.replay({ speed: 4 });
const unlinkFollower = replay.link(weeks, "1W");
// Panning either chart moves the other; the link is by time, not by index.
const unlinkViews = linkCharts([chart.chart, weeks.chart], { crosshair: true });
replay.subscribe((state: ReplayState) => {
status(
state.active
? `Bar ${state.index + 1} of ${state.total} ${new Date(state.time).toISOString().slice(0, 10)} ${state.playing ? "playing" : "paused"} at ${state.speed} bars a second`
: `Live: ${state.total || daily.length} daily bars, ${weekly.length} weekly bars.`,
);
});