Horizontal 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: "Rating",
      data: [
        {
          x: "Atlas",
          y: [3.13, 2.94, 2.49, 2.59, 2.43, 3.03, 2.9, 2.57, 2.75, 3.25, 3.52, 3.78, 3.23, 3.99, 3.03, 3.92, 3.47, 2.52, 3.05, 3.36, 3.5, 2.12, 2.59, 3.08, 2.18, 3.05, 2.84, 2.68, 2.57, 3.36, 3.63, 3.48, 3.04, 2.65, 3.15, 2.19, 3.34, 3.96, 3.31, 3.24, 2.08, 4.07, 2.99, 3.69, 3.18, 2.96, 2.58, 3.9, 2.39, 2.92, 3.12, 2.94, 2.84, 3.78, 2.18, 3.21, 3.87, 3.25, 3.69, 3.06, 4.07, 2.8, 2.26, 2.36, 2.68, 3.44, 3.51, 2.75, 3.07, 3.64]
        },
        {
          x: "Beacon",
          y: [2.91, 3.38, 3.56, 2.35, 3.38, 4.01, 3.29, 3.76, 2.81, 4.14, 3.13, 3.67, 3.83, 2.81, 3.44, 3.39, 2.47, 3.81, 3.32, 3.6, 3.22, 3.55, 2.73, 3.23, 3.73, 3.69, 3.64, 3.9, 3.5, 2.75, 3.2, 2.14, 2.24, 1.86, 2.87, 3.82, 4.08, 2.86, 3.11, 4.62, 2.75, 3.68, 4.12, 2.95, 2.92, 3.7, 3.64, 3.27, 3.07, 3.04, 3.39, 4.13, 3.96, 3.42, 3.11, 2.26, 2.52, 3.84, 3.29, 3.28, 2.87, 2.33, 3.31, 3.5, 4.2, 2.86, 3.36, 3.35, 3.16, 3.61]
        },
        {
          x: "Cirrus",
          y: [4.64, 3.78, 3.93, 3.88, 4.12, 4.31, 4.05, 2.95, 3.4, 4.46, 4.43, 3.67, 3.18, 3.48, 4.52, 3.55, 3.39, 3.3, 4.39, 3, 3.31, 3.93, 4.08, 3.43, 2.91, 3.83, 3.82, 3.6, 4.25, 3.83, 3.92, 3.55, 5, 4.37, 4.61, 3.78, 3.63, 3.41, 3.93, 2.98, 3, 3.58, 4.56, 2.65, 3.29, 4.24, 3.82, 4.18, 3.36, 3.67, 4.5, 3.93, 4.26, 3.12, 3.49, 2.89, 3.17, 3.55, 3.56, 4.56, 3.89, 4.31, 3.35, 4.09, 3.54, 4.47, 3.76, 3.52, 3.64, 2.49]
        },
        {
          x: "Delta",
          y: [4.46, 4.74, 4.08, 3.4, 3.68, 3.77, 2.58, 4.14, 4.54, 4.93, 4.05, 5, 5, 2.3, 4.4, 3.03, 3.45, 4.47, 3.95, 4.75, 3.29, 4.1, 4.42, 4.25, 4.12, 4.49, 4.07, 4.84, 4.42, 4.62, 3.66, 4.46, 4.27, 3.87, 3.44, 5, 4.74, 3.85, 4.31, 3.57, 4.48, 3.01, 3.65, 3.81, 3.92, 4.33, 4.57, 5, 4.52, 2.85, 4.45, 3.77, 5, 3.91, 4.3, 4.62, 3.65, 4.7, 3.64, 4.51, 3.97, 4.37, 3.4, 3.85, 4.11, 4.44, 4.29, 3.53, 4.24, 5]
        }
      ]
    }
  ],
  plotOptions: {
    bar: {
      horizontal: true,
      distributed: true
    }
  },
  title: {
    text: "App rating by product (1–5)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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