Violin with jitter

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: "violin",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Session min",
      data: [
        {
          x: "Free",
          y: [9.1, 3.6, 9, 9.8, 20.6, 10.7, 12, 11.4, 12.2, 10.4, 16.8, 9.7, 10.1, 16.9, 12.4, 17.7, 12.9, 20.1, 15.4, 17.8, 16, 16.8, 15.6, 8, 12.2, 11.8, 12, 12.2, 10.3, 18.9, 10.3, 17.7, 12.4, 5.7, 5.4, 18.8, 3.5, 13.4, 11.6, 15.2, 13.4, 3.9, 16.9, 13.8, 13, 7.7, 16, 9.7, 10.6, 21.4, 10.5, 10.2, 20.2, 9.6, 15.3, 8.4, 5.8, 14, 8, 11.4, 20.1, 16.1, 10.8, 14.9, 7.9, 12.8, 15.7, 12.7, 11.1, 9, 8, 14.5, 14.2, 10, 17.8, 11.7, 12.3, 7.2, 10.1, 11.5, 10.7, 13.3, 13.4, 17.2, 16.3, 12.3, 19.2, 13.2, 16.4, 9]
        },
        {
          x: "Team",
          y: [21.7, 20.8, 28.9, 12.6, 10.9, 15, 12.1, 19.1, 17.5, 16.7, 20.7, 18.5, 16.5, 28.4, 19.1, 22.4, 20.1, 15.8, 9.1, 17.5, 12.1, 17, 20.1, 23.4, 8.6, 27.6, 13.1, 11.2, 14.6, 17.9, 21.9, 16.9, 14.5, 9.7, 21.5, 12.6, 6.4, 10.3, 16.1, 18.9, 20.1, 15.6, 15, 21.6, 23.5, 9.8, 12.5, 16.8, 7.8, 18.8, 21.3, 20.6, 2.5, 22.2, 16.7, 13.7, 22.3, 19.2, 18.8, 26, 16.9, 17.3, 14.9, 20.9, 10.7, 28, 14.5, 17.6, 17.5, 16.4, 22.7, 19.9, 16, 29.4, 14.5, 17.8, 30.8, 22.3, 15.8, 10.7, 21.4, 20, 19, 17.5, 22.4, 17.8, 17.9, 19.9, 5.5, 21.1]
        },
        {
          x: "Business",
          y: [22.6, 40.3, 30.7, 15.5, 34.3, 15.7, 27.5, 12, 23, 20.3, 23.5, 19.6, 14.5, 26.4, 30, 25.9, 14.3, 27.4, 14.4, 25.7, 29, 34.9, 18.2, 26.1, 21.8, 21.7, 27.6, 26.2, 25.9, 26.9, 15.3, 32.6, 20.7, 21.4, 24, 25.4, 15, 24.9, 9.6, 22.6, 19.7, 25.5, 23.8, 7.8, 22.9, 22.6, 24.9, 25.8, 14.8, 15.8, 34.8, 18.8, 10.6, 22.2, 18.2, 25.2, 31.1, 23.7, 25.3, 22, 26.5, 23.4, 36, 26.9, 23.9, 30.7, 23.5, 21.2, 31.3, 10.5, 32, 31, 31.5, 22, 12.5, 21.5, 24.5, 23.9, 42.9, 18.9, 37.6, 16.7, 21.7, 24.4, 21.4, 29.6, 28.9, 19.6, 29, 24.8]
        }
      ]
    }
  ],
  plotOptions: {
    bar: {
      distributed: true
    },
    violin: {
      points: {
        size: 2
      }
    }
  },
  title: {
    text: "Session length by plan (min)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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