# Storyboard lab (Storyboard example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/storyboard/overview/ · Index for agents: https://westcoast-charts.com/llms.txt

Scroll inside the card: each text block moves the chart to its view.

- Chart type: `area` (Area)
- Collection: Storyboard · Storyboard
- Raw configuration: https://westcoast-charts.com/gallery-src/storyboard/overview.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/features/storyboard.html

## Setup

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

WestCoastCharts.use(perspectives).use(storyboard)
```

## Options

```js
const options = {
  chart: {
    height: 480,
    type: "area",
    stacked: true,
    zoom: {
      enabled: true
    },
    toolbar: {
      show: false
    }
  },
  stroke: {
    curve: "smooth",
    width: 1.6
  },
  dataLabels: {
    enabled: false
  },
  fill: {
    type: "gradient",
    gradient: {
      opacityFrom: 0.5,
      opacityTo: 0.08
    }
  },
  xaxis: {
    type: "datetime"
  },
  legend: {
    position: "top",
    horizontalAlign: "left"
  },
  series: [
    {
      name: "Subscribers",
      data: [
        [1736121600000, 4202],
        [1736726400000, 4316],
        [1737331200000, 4316],
        [1737936000000, 4455],
        [1738540800000, 4717],
        [1739145600000, 4440],
        [1739750400000, 4638],
        [1740355200000, 4648],
        [1740960000000, 4813],
        [1741564800000, 4639],
        [1742169600000, 4953],
        [1742774400000, 4841],
        [1743379200000, 4907],
        [1743984000000, 5022],
        [1744588800000, 4937],
        [1745193600000, 4989],
        [1745798400000, 4992],
        [1746403200000, 5219],
        [1747008000000, 5231],
        [1747612800000, 5278],
        [1748217600000, 5107],
        [1748822400000, 5235],
        [1749427200000, 5277],
        [1750032000000, 5435],
        [1750636800000, 5291],
        [1751241600000, 5311],
        [1751846400000, 5362],
        [1752451200000, 5262],
        [1753056000000, 5352],
        [1753660800000, 5616],
        [1754265600000, 5461],
        [1754870400000, 5465],
        [1755475200000, 5768],
        [1756080000000, 5788],
        [1756684800000, 5848],
        [1757289600000, 5544],
        [1757894400000, 5781],
        [1758499200000, 5884],
        [1759104000000, 5658],
        [1759708800000, 6012],
        [1760313600000, 6081],
        [1760918400000, 5926],
        [1761523200000, 5989],
        [1762128000000, 5970],
        [1762732800000, 5959],
        [1763337600000, 6091],
        [1763942400000, 6244],
        [1764547200000, 6145],
        [1765152000000, 6364],
        [1765756800000, 6097],
        [1766361600000, 6315],
        [1766966400000, 6213],
        [1767571200000, 6461],
        [1768176000000, 6443],
        [1768780800000, 6309],
        [1769385600000, 6433],
        [1769990400000, 6337],
        [1770595200000, 6548],
        [1771200000000, 6577],
        [1771804800000, 6464],
        [1772409600000, 6828],
        [1773014400000, 6523],
        [1773619200000, 6616],
        [1774224000000, 6932],
        [1774828800000, 6868],
        [1775433600000, 6982],
        [1776038400000, 7010],
        [1776643200000, 6936],
        [1777248000000, 6941],
        [1777852800000, 6937],
        [1778457600000, 6879],
        [1779062400000, 7080],
        [1779667200000, 7047],
        [1780272000000, 6988],
        [1780876800000, 7245],
        [1781481600000, 7382],
        [1782086400000, 7142],
        [1782691200000, 7474],
        [1783296000000, 7429],
        [1783900800000, 7373],
        [1784505600000, 7321],
        [1785110400000, 7433],
        [1785715200000, 7441],
        [1786320000000, 7707],
        [1786924800000, 7631],
        [1787529600000, 7489]
      ]
    },
    {
      name: "Casual",
      data: [
        [1736121600000, 623],
        [1736726400000, 923],
        [1737331200000, 889],
        [1737936000000, 810],
        [1738540800000, 696],
        [1739145600000, 606],
        [1739750400000, 969],
        [1740355200000, 1007],
        [1740960000000, 748],
        [1741564800000, 764],
        [1742169600000, 693],
        [1742774400000, 1027],
        [1743379200000, 730],
        [1743984000000, 981],
        [1744588800000, 1397],
        [1745193600000, 1987],
        [1745798400000, 2313],
        [1746403200000, 3018],
        [1747008000000, 3433],
        [1747612800000, 3738],
        [1748217600000, 4278],
        [1748822400000, 4727],
        [1749427200000, 4807],
        [1750032000000, 5061],
        [1750636800000, 5224],
        [1751241600000, 5378],
        [1751846400000, 5656],
        [1752451200000, 5218],
        [1753056000000, 5320],
        [1753660800000, 5033],
        [1754265600000, 4743],
        [1754870400000, 4540],
        [1755475200000, 4208],
        [1756080000000, 3821],
        [1756684800000, 3563],
        [1757289600000, 2915],
        [1757894400000, 2397],
        [1758499200000, 2154],
        [1759104000000, 1596],
        [1759708800000, 865],
        [1760313600000, 973],
        [1760918400000, 805],
        [1761523200000, 878],
        [1762128000000, 964],
        [1762732800000, 696],
        [1763337600000, 925],
        [1763942400000, 1005],
        [1764547200000, 803],
        [1765152000000, 989],
        [1765756800000, 731],
        [1766361600000, 749],
        [1766966400000, 917],
        [1767571200000, 722],
        [1768176000000, 606],
        [1768780800000, 857],
        [1769385600000, 776],
        [1769990400000, 663],
        [1770595200000, 657],
        [1771200000000, 614],
        [1771804800000, 906],
        [1772409600000, 697],
        [1773014400000, 1063],
        [1773619200000, 1051],
        [1774224000000, 888],
        [1774828800000, 876],
        [1775433600000, 985],
        [1776038400000, 1798],
        [1776643200000, 2165],
        [1777248000000, 2792],
        [1777852800000, 3906],
        [1778457600000, 4293],
        [1779062400000, 4657],
        [1779667200000, 5171],
        [1780272000000, 6114],
        [1780876800000, 6288],
        [1781481600000, 6397],
        [1782086400000, 6771],
        [1782691200000, 7118],
        [1783296000000, 6724],
        [1783900800000, 6956],
        [1784505600000, 6717],
        [1785110400000, 6479],
        [1785715200000, 6100],
        [1786320000000, 6027],
        [1786924800000, 5633],
        [1787529600000, 4719]
      ]
    }
  ],
  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 storyboard-overview.json --out storyboard-overview.svg --with-table` (save the options above as JSON first)