# Basic streamgraph (Streamgraph example)

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

Listening hours by genre over two years.

Why it matters: inside-out ordering and wiggle offset keep big layers calm; layers morph on update; labels inside wide bands

- Chart type: `streamgraph` (Streamgraph)
- Collection: Streamgraph · Streamgraph
- Raw configuration: https://westcoast-charts.com/gallery-src/streamgraph/basic-streamgraph.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/streamgraph/basic-streamgraph.html

## Setup

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

WestCoastCharts.use(types)
```

## Options

```js
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "streamgraph",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Pop",
      data: [
        [1704067200000, 19],
        [1706693760000, 21],
        [1709320320000, 25],
        [1711946880000, 29],
        [1714573440000, 30],
        [1717200000000, 29],
        [1719826560000, 32],
        [1722453120000, 27],
        [1725079680000, 23],
        [1727706240000, 23],
        [1730332800000, 15],
        [1732959360000, 9],
        [1735585920000, 14],
        [1738212480000, 13],
        [1740839040000, 6],
        [1743465600000, 10],
        [1746092160000, 17],
        [1748718720000, 14],
        [1751345280000, 20],
        [1753971840000, 23],
        [1756598400000, 20],
        [1759224960000, 29],
        [1761851520000, 30],
        [1764478080000, 33]
      ]
    },
    {
      name: "Rock",
      data: [
        [1704067200000, 31],
        [1706693760000, 25],
        [1709320320000, 29],
        [1711946880000, 30],
        [1714573440000, 30],
        [1717200000000, 27],
        [1719826560000, 16],
        [1722453120000, 18],
        [1725079680000, 15],
        [1727706240000, 14],
        [1730332800000, 6],
        [1732959360000, 7],
        [1735585920000, 6],
        [1738212480000, 12],
        [1740839040000, 15],
        [1743465600000, 19],
        [1746092160000, 27],
        [1748718720000, 24],
        [1751345280000, 21],
        [1753971840000, 30],
        [1756598400000, 31],
        [1759224960000, 29],
        [1761851520000, 30],
        [1764478080000, 30]
      ]
    },
    {
      name: "Jazz",
      data: [
        [1704067200000, 34],
        [1706693760000, 27],
        [1709320320000, 28],
        [1711946880000, 23],
        [1714573440000, 21],
        [1717200000000, 8],
        [1719826560000, 9],
        [1722453120000, 8],
        [1725079680000, 8],
        [1727706240000, 6],
        [1730332800000, 12],
        [1732959360000, 13],
        [1735585920000, 18],
        [1738212480000, 19],
        [1740839040000, 23],
        [1743465600000, 27],
        [1746092160000, 26],
        [1748718720000, 38],
        [1751345280000, 29],
        [1753971840000, 31],
        [1756598400000, 27],
        [1759224960000, 22],
        [1761851520000, 16],
        [1764478080000, 18]
      ]
    },
    {
      name: "Electronic",
      data: [
        [1704067200000, 29],
        [1706693760000, 11],
        [1709320320000, 12],
        [1711946880000, 11],
        [1714573440000, 10],
        [1717200000000, 5],
        [1719826560000, 9],
        [1722453120000, 5],
        [1725079680000, 15],
        [1727706240000, 18],
        [1730332800000, 21],
        [1732959360000, 21],
        [1735585920000, 28],
        [1738212480000, 29],
        [1740839040000, 34],
        [1743465600000, 37],
        [1746092160000, 33],
        [1748718720000, 30],
        [1751345280000, 24],
        [1753971840000, 21],
        [1756598400000, 18],
        [1759224960000, 12],
        [1761851520000, 11],
        [1764478080000, 7]
      ]
    },
    {
      name: "Classical",
      data: [
        [1704067200000, 10],
        [1706693760000, 12],
        [1709320320000, 7],
        [1711946880000, 13],
        [1714573440000, 11],
        [1717200000000, 15],
        [1719826560000, 18],
        [1722453120000, 15],
        [1725079680000, 27],
        [1727706240000, 32],
        [1730332800000, 36],
        [1732959360000, 27],
        [1735585920000, 29],
        [1738212480000, 35],
        [1740839040000, 30],
        [1743465600000, 29],
        [1746092160000, 22],
        [1748718720000, 17],
        [1751345280000, 15],
        [1753971840000, 12],
        [1756598400000, 8],
        [1759224960000, 11],
        [1761851520000, 12],
        [1764478080000, 9]
      ]
    },
    {
      name: "Hip-hop",
      data: [
        [1704067200000, 10],
        [1706693760000, 15],
        [1709320320000, 17],
        [1711946880000, 14],
        [1714573440000, 20],
        [1717200000000, 24],
        [1719826560000, 25],
        [1722453120000, 30],
        [1725079680000, 31],
        [1727706240000, 31],
        [1730332800000, 33],
        [1732959360000, 32],
        [1735585920000, 29],
        [1738212480000, 21],
        [1740839040000, 17],
        [1743465600000, 13],
        [1746092160000, 9],
        [1748718720000, 11],
        [1751345280000, 8],
        [1753971840000, 5],
        [1756598400000, 8],
        [1759224960000, 14],
        [1761851520000, 14],
        [1764478080000, 19]
      ]
    }
  ],
  xaxis: {
    type: "datetime",
    labels: {
      format: "MMM 'yy"
    }
  },
  title: {
    text: "Listening hours by genre"
  },
  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 streamgraph-basic-streamgraph.json --out streamgraph-basic-streamgraph.svg --with-table` (save the options above as JSON first)