Conversation stream

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

WestCoastCharts.use(types)

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()