Basic raincloud

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: "raincloud",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Seconds",
      data: [
        {
          x: "Guided",
          y: [40.1, 26.7, 42.9, 42.2, 40.8, 36.8, 39.6, 29.8, 40.6, 46.2, 51.7, 43.8, 31.2, 37.3, 20, 34.4, 42.1, 40, 27.5, 51.5, 39.9, 44.9, 44.9, 48.2, 38, 43.4, 46.5, 36.1, 31.4, 44.6, 54.9, 32.3, 44.1, 37.3, 34.2, 33.2, 44.3, 36.8, 50.9, 43.1, 27.9, 20.2, 47.4, 37.3, 40.8, 33.1, 32.2, 41.2, 49.8, 44.8, 43.5, 47.1, 43.6, 39.5, 37.1, 37.9, 24.4, 34.6, 42, 28.9, 46.9, 31.3, 32.9, 34.4, 35.8, 50.3, 40.6, 42.9, 30.9, 39, 46.9, 29.4, 26.2, 27.5, 38, 29.5, 54, 52.9, 46.8, 50.5]
        },
        {
          x: "Video",
          y: [56.3, 51.4, 36.9, 42.4, 54.9, 46.7, 59.7, 45.5, 68.3, 58.2, 65.3, 48.9, 41.6, 45.5, 42.1, 42.8, 58.9, 67.5, 50.1, 69.6, 48.6, 45.2, 69.3, 53.5, 70.9, 47.3, 67, 46.6, 37.8, 65.2, 42.1, 72.1, 61.1, 38.3, 44.7, 66.1, 64.3, 51.9, 34.2, 52.2, 55.6, 54.3, 52.3, 43.4, 49.4, 60.5, 50.4, 53.6, 42.1, 46.8, 52.9, 59.2, 50.4, 43, 57, 51.2, 81.4, 45.2, 47.3, 33.3, 44, 50.1, 57.3, 45.2, 51.4, 43.4, 63, 56.3, 58.3, 36.7, 40.9, 48.6, 37.6, 60.6, 41.6, 46.9, 47.7, 58.7, 52.5, 58.1]
        },
        {
          x: "Docs",
          y: [52.4, 82.4, 51.2, 56.6, 54.7, 74.8, 57.2, 44.9, 57.8, 70.6, 67.3, 69.8, 56.1, 64.9, 30, 78.4, 35.6, 57.7, 87, 73.5, 17.3, 47.9, 59.3, 73.7, 73.5, 73, 72.7, 62.3, 46.6, 87.7, 57.8, 71.6, 70.3, 79.2, 75.5, 48.3, 32.5, 67.1, 76, 79.3, 51.9, 55.5, 46.8, 77.4, 63.2, 58.7, 48.3, 79.2, 77.1, 72, 61.8, 53.9, 75, 66, 51.7, 66.9, 91.2, 83.8, 58.8, 73.8, 49.7, 58.8, 60.1, 59.3, 63.7, 77, 77.5, 40.7, 62.7, 68.7, 59.5, 62.4, 65.9, 56.2, 50.4, 78, 87.3, 75.7, 40, 52.3]
        },
        {
          x: "None",
          y: [61.7, 109.7, 69.5, 68, 92.7, 67.5, 54, 57.8, 47.6, 58.7, 69.9, 85.5, 73.5, 77.7, 66.6, 67.8, 62.5, 70.3, 63.7, 74, 97.4, 105.4, 57.7, 70.6, 70.7, 100.8, 79, 67.7, 62.6, 73.7, 93.6, 65.8, 79.9, 92.2, 63.2, 83.5, 80.3, 80.9, 54, 85.1, 58.8, 82.4, 89.2, 71.6, 83.8, 99.9, 73.8, 71.8, 97.2, 62.3, 82.9, 74.1, 89.9, 87.1, 72.9, 86.5, 65.9, 44.9, 48.9, 83.2, 84.9, 85.1, 91.2, 59.4, 82.3, 47.9, 84.9, 69.2, 91, 46.3, 80.6, 88.2, 85.1, 78.2, 89, 106.8, 78.5, 65.2, 62.8, 63.8]
        }
      ]
    }
  ],
  title: {
    text: "Time to first value (s)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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