# Conversation stream (Streamgraph example)

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

Symmetric (silhouette) stream of topics in a community thread, with labelled bands and a story note.

- Chart type: `streamgraph` (Streamgraph)
- Collection: Streamgraph · Streamgraph
- Raw configuration: https://westcoast-charts.com/gallery-src/streamgraph/streamgraph-conversation.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/streamgraph/streamgraph-conversation.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: "Questions",
      data: [12.6, 18.5, 24.5, 28.5, 30.9, 28.6, 24.1, 18.4, 12.7, 8.3, 4.6, 2.8, 1.1, 1.2, 0.5, 0.7, 0.7, 0.5, 0.5, 0.5, 0.9, 1, 0.5, 0.5]
    },
    {
      name: "Bug reports",
      data: [0.5, 0.8, 1.5, 1.9, 3.8, 7.2, 10.8, 15.8, 21.5, 24.6, 26.1, 24.6, 21.5, 16.1, 11.5, 6.7, 4.2, 2.6, 0.9, 1.2, 0.5, 0.5, 0.5, 0.5]
    },
    {
      name: "Feature ideas",
      data: [0.5, 0.5, 0.5, 0.7, 0.9, 0.5, 1.3, 1.6, 2.5, 3.1, 5.6, 7.5, 10.8, 13.9, 17.2, 20.1, 21.9, 22.9, 22.2, 19.6, 16.8, 13.9, 10.9, 8.1]
    },
    {
      name: "Thanks",
      data: [0.5, 0.5, 0.9, 0.5, 0.5, 0.8, 0.7, 0.6, 1.1, 1.3, 1.4, 2.4, 3.5, 4.6, 4.9, 6.9, 7.4, 9.2, 9.9, 10.6, 10.8, 10, 10, 8.7]
    }
  ],
  xaxis: {
    categories: ["0h", "1h", "2h", "3h", "4h", "5h", "6h", "7h", "8h", "9h", "10h", "11h", "12h", "13h", "14h", "15h", "16h", "17h", "18h", "19h", "20h", "21h", "22h", "23h"]
  },
  plotOptions: {
    streamgraph: {
      offset: "silhouette"
    }
  },
  title: {
    text: "Messages per hour by topic"
  },
  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-streamgraph-conversation.json --out streamgraph-streamgraph-conversation.svg --with-table` (save the options above as JSON first)