Bimodal, horizontal

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: "Minutes",
      data: [
        {
          x: "City A",
          y: [22.9, 20.2, 15.7, 19.5, 13.9, 18.2, 20.7, 19, 17.8, 12.1, 36.2, 45.1, 40.2, 35.6, 37.3, 47.1, 22, 51.4, 13.6, 15, 38.3, 45.9, 42.9, 21.6, 40.3, 17.2, 21, 13.8, 39.6, 18.7, 45.2, 17.5, 18.3, 23.5, 22.7, 22.2, 21.3, 14.8, 16.5, 12.1, 15.1, 35.7, 13.1, 11.9, 16.1, 11.9, 10.3, 19.9, 17.6, 16.6, 40.7, 19.3, 19.4, 40.3, 39.6, 42.5, 35, 38.5, 39.1, 22.2, 22.5, 53.4, 18.2, 24.5, 42, 42.7, 43, 14.7, 17.3, 27, 42.8, 42.6, 15.4, 40.3, 17, 16.8, 45.8, 40.9, 20.5, 25.9, 41, 18, 22.8, 21.1, 46, 40.2, 17.4, 23.1, 18.4, 38.4, 47.8, 38.5, 40.7, 37.5, 45, 39.4, 37.5, 14.8, 17.7, 47.5, 41.8, 42.5, 12.8, 17.8, 40.2, 19.4, 41.4, 17.4, 41.9, 49.8, 11, 38.4, 44.7, 46.2, 19.4, 47.8, 48.7, 16.2, 21.1, 18.7, 43.4, 23.1, 13.6, 33.2, 42.2, 15.9, 20, 43.5, 48.6, 47.3, 43.5, 34.1, 38.5, 46.1, 46.9, 40.1, 15.6, 18.5, 40.3, 22.8, 20.3, 15.4, 46, 44.9, 14.8, 39.5, 16.4, 46, 20.1, 16.6]
        },
        {
          x: "City B",
          y: [52.8, 47.2, 15.1, 45.2, 26.8, 55.3, 23.8, 24.7, 25.9, 52.9, 29.3, 46.3, 24.8, 52.2, 35.6, 31.7, 22.6, 25.4, 51.2, 52.2, 24.3, 43.1, 29.1, 29.7, 35.4, 42.9, 23.2, 21.9, 21.5, 19.8, 51.5, 45.5, 51.8, 53.9, 23.1, 47.6, 46, 50.3, 19.8, 48.8, 53.5, 50.3, 52.7, 46.1, 47.8, 46.1, 26.6, 52.1, 24.6, 45.3, 52.4, 27.9, 22.4, 21.8, 30.9, 18.1, 32.9, 19.9, 50.1, 47.3, 53.7, 49.5, 48.9, 52.7, 25.1, 46.4, 25, 29.8, 53.5, 25.9, 25.8, 45.9, 24.7, 22, 51, 50.7, 20.6, 50.3, 49.2, 47.4, 24.8, 43, 27.8, 21.4, 29.5, 43, 51.2, 20.8, 22.1, 24, 25.7, 25.3, 24.2, 31.3, 26.4, 23.1, 53.2, 47.3, 48.5, 23.2, 29.2, 54.5, 43.1, 19.5, 49.4, 48.6, 30.9, 24.5, 48, 29.9, 54.3, 16.6, 27, 46.6, 51.5, 50.7, 44.1, 46.3, 50.2, 27.2, 43, 48.8, 26.7, 46.1, 22.4, 25.5, 26.5, 26, 28.6, 28.6, 49.9, 18.8, 21.5, 28.9, 22.3, 44, 20.7, 25.4, 50.8, 48.3, 49.4, 43, 48.6, 29.7, 47.7, 45.7, 50.9, 25.2, 22.1, 24.3]
        },
        {
          x: "City C",
          y: [22.4, 16.3, 39.4, 18.5, 9.1, 25.5, 30.6, 29.6, 13.7, 27.8, 32.3, 27.3, 15.6, 26.4, 31.1, 10.4, 26.9, 21.6, 23.7, 25.8, 17.6, 31, 10.7, 21, 11.7, 15.9, 28.4, 14, 19.9, 27.7, 25.8, 12.8, 33.4, 27.5, 10.9, 10, 17.7, 6.7, 22.2, 28.7, 25.7, 25.5, 16.4, 12.7, 26.1, 15.1, 28.4, 17, 13.9, 17.9, 25.9, 15.9, 11.5, 30.4, 39, 36.5, 14.1, 15.1, 16.1, 6.6, 17.8, 31.5, 10.2, 13.7, 12.9, 9.2, 27.5, 16.3, 19.3, 33, 34.5, 23.7, 17.1, 10.1, 16.2, 16.2, 27, 15.2, 15.5, 38.2, 15.1, 16.2, 13.2, 30.6, 28.3, 20.3, 36.2, 8.7, 3.7, 28.1, 11.9, 13.6, 11.5, 31.9, 26.6, 35.8, 32.9, 16, 16.9, 27.6, 8.1, 9.9, 27.2, 22.4, 21.9, 30.2, 29.5, 7.8, 30.2, 23.5, 20, 34.2, 19.6, 8.6, 24.1, 30.5, 11.9, 12.3, 20, 15.4, 6.6, 24.9, 30.4, 10.9, 18, 17, 23.1, 27.9, 34.9, 23.3, 13.1, 17.9, 18.4, 11.8, 11.9, 25.8, 28.5, 22.6, 23.2, 15.6, 14.6, 32.1, 27.2, 27.9, 29, 28.2, 11.5, 23.8, 13.3, 16.4]
        }
      ]
    }
  ],
  plotOptions: {
    bar: {
      horizontal: true
    },
    violin: {
      points: {
        size: 1.8,
        opacity: 0.7
      }
    }
  },
  title: {
    text: "Commute time (min)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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