Skip to content
EliteChart

Replay mode

A bar-by-bar playback state machine — train your eye, backtest a strategy by hand.

Replay rewinds the chart to a chosen historical point and steps forward bar-by-bar at a chosen speed. Useful for training (read the chart without leakage), demoing strategies, and recording walkthroughs.

Quick example

code
'use client';
import { useEffect } from 'react';
import { EliteChart, useChartStore } from '@elitechart/elitechart';
import '@elitechart/elitechart/styles.css';

export default function Page() {
  useEffect(() => {
    const store = useChartStore.getState();
    store.setReplayActive(true);
    store.setReplayCursor(Date.now() - 7 * 24 * 60 * 60 * 1000); // 7 days ago
    store.setReplaySpeed(2);
  }, []);
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <EliteChart symbol="BTCUSD" timeframe="1h" />
    </div>
  );
}

How it works

Replay is a state machine on useChartStore:

  • replayActive: boolean — gate flag.
  • replayCursor: TimestampMs — current playback head.
  • replaySpeed: 0.5 | 1 | 2 | 4 | 8 — bars-per-second multiplier.
  • replayPlaying: boolean — whether the cursor is auto-advancing.

When active, the renderer hides every bar with time > replayCursor. Step buttons advance/retreat the cursor by one bar; play auto-advances at replaySpeed × baseTickInterval.

The Replay toolbar in the bottom-right is draggable and remembers its position across reloads. Toggle from the top bar or Cmd-Shift-R.

Variations

Step manually

code
useChartStore.getState().replayStep(+1);  // forward one bar
useChartStore.getState().replayStep(-1);  // back one bar

Exit replay back to live

code
useChartStore.getState().setReplayActive(false);

API

ActionMethod
Enter replaysetReplayActive(true)
Exit replaysetReplayActive(false)
Move cursorsetReplayCursor(ts)
StepreplayStep(±1)
SpeedsetReplaySpeed(0.5|1|2|4|8)
Play / pausesetReplayPlaying(bool)