Skip to content

Financial

Bar replay

Step or play the history forward from any bar, with the higher-timeframe chart following along.

Bar replay@ortex-charts/financial
Loading 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.`,
    );
});