Scrollytelling

import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import perspectives from 'west-coast-charts/features/perspectives'
import storyboard from 'west-coast-charts/features/storyboard'

WestCoastCharts.use(types).use(perspectives).use(storyboard)

const options = {
  chart: {
    height: 340,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "area",
    zoom: {
      enabled: true
    },
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Orders",
      data: [
        [1767571200000, 101.4],
        [1768176000000, 100.1],
        [1768780800000, 100.1],
        [1769385600000, 99.6],
        [1769990400000, 98],
        [1770595200000, 97.6],
        [1771200000000, 99.5],
        [1771804800000, 99.2],
        [1772409600000, 99.1],
        [1773014400000, 98.6],
        [1773619200000, 100.5],
        [1774224000000, 100.6],
        [1774828800000, 98.7],
        [1775433600000, 100.8],
        [1776038400000, 102.1],
        [1776643200000, 100.8],
        [1777248000000, 102.7],
        [1777852800000, 103.4],
        [1778457600000, 103.8],
        [1779062400000, 105.7],
        [1779667200000, 104.4],
        [1780272000000, 106.4],
        [1780876800000, 105],
        [1781481600000, 107],
        [1782086400000, 108.2],
        [1782691200000, 107.3],
        [1783296000000, 106.8],
        [1783900800000, 106],
        [1784505600000, 107.8],
        [1785110400000, 106.3],
        [1785715200000, 105.8],
        [1786320000000, 106.9],
        [1786924800000, 105.5],
        [1787529600000, 105.7],
        [1788134400000, 106.3],
        [1788739200000, 106.7],
        [1789344000000, 106],
        [1789948800000, 105.8],
        [1790553600000, 104.8],
        [1791158400000, 104.9],
        [1791763200000, 103.5],
        [1792368000000, 102.3],
        [1792972800000, 100.4],
        [1793577600000, 101.6],
        [1794182400000, 102.1],
        [1794787200000, 100.7],
        [1795392000000, 100.2],
        [1795996800000, 101.2],
        [1796601600000, 99.8],
        [1797206400000, 101.2],
        [1797811200000, 100.5],
        [1798416000000, 101.4],
        [1799020800000, 102.4],
        [1799625600000, 103.6],
        [1800230400000, 102.7],
        [1800835200000, 102.9],
        [1801440000000, 101.5],
        [1802044800000, 101.4],
        [1802649600000, 102],
        [1803254400000, 102.6],
        [1803859200000, 103.9],
        [1804464000000, 105.3],
        [1805068800000, 106.4],
        [1805673600000, 107.5],
        [1806278400000, 105.9],
        [1806883200000, 105.6],
        [1807488000000, 103.9],
        [1808092800000, 102.6],
        [1808697600000, 104.4],
        [1809302400000, 103.1],
        [1809907200000, 102.4],
        [1810512000000, 102.1],
        [1811116800000, 100.3],
        [1811721600000, 99.5],
        [1812326400000, 98.1],
        [1812931200000, 97.2],
        [1813536000000, 95.3],
        [1814140800000, 93.5],
        [1814745600000, 94.6],
        [1815350400000, 94.1],
        [1815955200000, 94],
        [1816560000000, 94.2],
        [1817164800000, 93.3],
        [1817769600000, 92.4],
        [1818374400000, 92.4],
        [1818979200000, 91.6],
        [1819584000000, 90],
        [1820188800000, 89.6],
        [1820793600000, 88],
        [1821398400000, 88.8],
        [1822003200000, 90.7],
        [1822608000000, 90.2],
        [1823212800000, 89.2],
        [1823817600000, 90.4],
        [1824422400000, 89.5],
        [1825027200000, 91.6],
        [1825632000000, 92.7],
        [1826236800000, 92.4],
        [1826841600000, 92],
        [1827446400000, 90.9],
        [1828051200000, 89.2],
        [1828656000000, 88],
        [1829260800000, 89.2],
        [1829865600000, 89.4]
      ]
    }
  ],
  xaxis: {
    type: "datetime"
  },
  stroke: {
    width: 2,
    curve: "smooth"
  },
  fill: {
    opacity: 0.15
  },
  dataLabels: {
    enabled: false
  },
  title: {
    text: "Two years of weekly orders"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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