# Undo / redo (History example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/history/narrative-state-undo-redo/ · Index for agents: https://westcoast-charts.com/llms.txt

Zoom, hide series or load new data, then step back with the toolbar, the buttons or Ctrl/Cmd+Z.

- Chart type: `line` (Line)
- Collection: History · History / rewind
- Raw configuration: https://westcoast-charts.com/gallery-src/history/narrative-state-undo-redo.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/narrative-state/undo-redo.html
- Same example as: https://westcoast-charts.com/gallery/narrative-state/undo-redo/index.md

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import history from 'west-coast-charts/features/history'

WestCoastCharts.use(types).use(history)
```

## Options

```js
const options = {
  chart: {
    height: 360,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "line",
    zoom: {
      enabled: true
    },
    history: {
      enabled: true,
      wcc: {
        toolbar: true,
        recordData: true
      }
    },
    events: {
      wccHistoryChange: () => upd()
    }
  },
  series: [
    {
      name: "Web",
      data: [
        [1767571200000, 61.5],
        [1768176000000, 60.9],
        [1768780800000, 59.4],
        [1769385600000, 60.6],
        [1769990400000, 58.4],
        [1770595200000, 56.5],
        [1771200000000, 57.5],
        [1771804800000, 57.4],
        [1772409600000, 56.3],
        [1773014400000, 54.2],
        [1773619200000, 56.5],
        [1774224000000, 58.4],
        [1774828800000, 57.4],
        [1775433600000, 58.8],
        [1776038400000, 60.3],
        [1776643200000, 60.8],
        [1777248000000, 58.6],
        [1777852800000, 58.8],
        [1778457600000, 60.2],
        [1779062400000, 60.3],
        [1779667200000, 59.8],
        [1780272000000, 60.2],
        [1780876800000, 59.3],
        [1781481600000, 60],
        [1782086400000, 60.3],
        [1782691200000, 61.9],
        [1783296000000, 63.6],
        [1783900800000, 65.1],
        [1784505600000, 65.2],
        [1785110400000, 66.7],
        [1785715200000, 64.8],
        [1786320000000, 66.6],
        [1786924800000, 68],
        [1787529600000, 69.8],
        [1788134400000, 70.1],
        [1788739200000, 67.8],
        [1789344000000, 67.3],
        [1789948800000, 67.9],
        [1790553600000, 65.5],
        [1791158400000, 63.8]
      ]
    },
    {
      name: "App",
      data: [
        [1767571200000, 81.5],
        [1768176000000, 83.4],
        [1768780800000, 81.6],
        [1769385600000, 83.1],
        [1769990400000, 82.1],
        [1770595200000, 80.3],
        [1771200000000, 78.8],
        [1771804800000, 78.1],
        [1772409600000, 76.4],
        [1773014400000, 75.9],
        [1773619200000, 76.7],
        [1774224000000, 75.5],
        [1774828800000, 74.6],
        [1775433600000, 74],
        [1776038400000, 76.6],
        [1776643200000, 74.6],
        [1777248000000, 76.2],
        [1777852800000, 75.1],
        [1778457600000, 76.6],
        [1779062400000, 78.7],
        [1779667200000, 78.5],
        [1780272000000, 77.9],
        [1780876800000, 75.9],
        [1781481600000, 75.6],
        [1782086400000, 76.1],
        [1782691200000, 78.2],
        [1783296000000, 76.2],
        [1783900800000, 78.4],
        [1784505600000, 80.9],
        [1785110400000, 80.8],
        [1785715200000, 78.5],
        [1786320000000, 80.5],
        [1786924800000, 81.6],
        [1787529600000, 80.7],
        [1788134400000, 78.4],
        [1788739200000, 80.3],
        [1789344000000, 81.8],
        [1789948800000, 79.8],
        [1790553600000, 81.4],
        [1791158400000, 79.5]
      ]
    },
    {
      name: "Retail",
      data: [
        [1767571200000, 100.9],
        [1768176000000, 103],
        [1768780800000, 103.7],
        [1769385600000, 103.6],
        [1769990400000, 105.5],
        [1770595200000, 107.5],
        [1771200000000, 108.1],
        [1771804800000, 107.7],
        [1772409600000, 108.2],
        [1773014400000, 110.4],
        [1773619200000, 108.1],
        [1774224000000, 109.6],
        [1774828800000, 107.5],
        [1775433600000, 106],
        [1776038400000, 103.9],
        [1776643200000, 102.9],
        [1777248000000, 105.3],
        [1777852800000, 103.7],
        [1778457600000, 103.2],
        [1779062400000, 104.8],
        [1779667200000, 103.7],
        [1780272000000, 104.7],
        [1780876800000, 102.6],
        [1781481600000, 101.1],
        [1782086400000, 101],
        [1782691200000, 103.5],
        [1783296000000, 102.1],
        [1783900800000, 104.4],
        [1784505600000, 102.7],
        [1785110400000, 103.9],
        [1785715200000, 101.9],
        [1786320000000, 102.3],
        [1786924800000, 104.3],
        [1787529600000, 106.2],
        [1788134400000, 107.4],
        [1788739200000, 109],
        [1789344000000, 107.6],
        [1789948800000, 110.1],
        [1790553600000, 112.1],
        [1791158400000, 110.8]
      ]
    }
  ],
  xaxis: {
    type: "datetime"
  },
  stroke: {
    width: 2
  },
  title: {
    text: "Weekly orders"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()
```

## Verify

- Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page.
- Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export history-narrative-state-undo-redo.json --out history-narrative-state-undo-redo.svg --with-table` (save the options above as JSON first)