Undo / Redo (Rewind)

Charts do not usually have an undo button. Zoom to the wrong window, toggle off the wrong series, or nudge an annotation by accident, and there is no Ctrl-Z to walk it back. Rewind adds that. It keeps a command journal of what happened on the chart, so zooms, series toggles, option changes, and annotation edits can all be undone and redone. It is also smart about gestures: a continuous drag or a burst of zoom steps coalesces into a single journal entry, so one motion is one undo, not fifty.

See it live

The demo below has Rewind on. Drag the Peak note, run a measurement, or add a note, then press Undo to reverse the last change. (The same chart shows Ink, the context menu, and Measure, which are exactly the kinds of edits Rewind records.)

Drag a labelled point, right-click to add a note, or Measure across the chart.

Right-click the chart to open the context menu, then choose Add note here.

The Peak and Watch callouts are draggable (Ink); grab one and move it, and its new position is written back to annotations.points in data coordinates. Right-click anywhere on the chart to open the context menu and choose Add note here, which drops an editable note at that exact point; click any note to reopen its editor. Turn on Measure and drag to read a move; Undo reverses the last drag, edit, or measure via Rewind.

Rewind is shown reversing annotation edits in the walkthrough at Direct-Manipulation Annotations: Ink and Measure.

Where it is useful

Editing-heavy dashboards. Users toggle series and zoom a lot; Rewind lets them step back without reloading.
Annotation authoring. Paired with Ink, every drag, restyle, and delete is reversible, so mistakes are cheap.
Exploratory analysis. Step back through a chain of zooms to return to an earlier view.
Any interactive chart where a wrong action should be recoverable rather than permanent.

For a read-only chart the reader only looks at, leave Rewind off to keep the bundle lean.

Enable the feature

Rewind is double opt-in: import the feature and set chart.history.enabled: true.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/history'

const options = {
  chart: {
    history: { enabled: true, maxDepth: 100, coalesceMs: 250 },
  },
}

See the chart.history options for every field. With keyboard: true (the default), Ctrl-Z / Ctrl-Y (and Cmd on macOS) work while the chart has focus.

Drive it from code

chart.history.undo()
chart.history.redo()
chart.history.canUndo() // boolean, e.g. to enable a toolbar button
chart.history.canRedo()
chart.history.jump(id)  // jump to a specific journal entry
chart.history.clear()
chart.history.entries() // the recorded steps

Group edits into one step

Wrap several changes in a transaction so they undo together, with an optional label:

await chart.history.transaction(() => {
  chart.hideSeries('Revenue')
  chart.zoomX(1609459200000, 1640995200000)
}, { label: 'Focus Q4 revenue' })

When to use Rewind

Enable Rewind on editing-heavy charts and anywhere users author or explore. It pairs naturally with Ink, so every drag, restyle, and delete is undoable, and with the context menu. Try the Undo / Redo demo.

Rewind ships as a tree-shakeable entry point; see the tree-shaking guide.