Cloud and rain

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: "Delay min",
      data: [
        {
          x: "Morning",
          y: [6.8, 8.3, 4.9, 9.2, 5.1, 8, 7.2, 10, 5.9, 6.8, 7.9, 8.7, 5.7, 5.5, 2.5, 6.1, 5.6, 4.5, 3.5, 4.4, 4.8, 4.8, 6.3, 5.9, 0.1, 2.4, 4.9, 7.2, 6.1, 2.1, 6.1, 2.3, 4, 5.2, 5.6, 4.4, 4.6, 7.8, 7.7, 5, 6.3, 4.3, 5.9, 5.5, 6.8, 5.5, 3.9, 6.1, 9.2, 5.1, 6, 7.9, 9, 5.4, 6.8, 2.6, 5.9, 4.7, 2.5, 6.7, 9.5, 7.1, 6.8, 3.3, 4.6, 7.4, 4.3, 6.5, 7.9, 6.5, 3.9, 6.1, 6.5, 5.4, 7, 10.8, 5.8, 7.5, 7, 8.1, 8.3, 5.4, 5.6, 2.9, 3.8, 4.1, 6.6, 5.5, 10, 7.1, 8.7, 9.2, 7.2, 3.1, 7.7, 5.8, 8.4, 7.6, 8, 5.8, 11.5, 5.7, 5, 1.5, 7.1, 4.4, 5.9, 7.8, 4.3, 5.3, 7, 7.3, 9.1, 6.9, 7.5, 5.2, 5.1, 7.2, 2.4, 5.7, 6.5, 5.9, 5.6, 8.5, 5.8, 5.9, 7.7, 6.4, 2.6, 5.9, 6.6, 8.7, 5.2, 8.8, 4.8, 6.6, 6.5, 2.1, 4.2, 5.9, 7.5, 2.4, 8.2, 7.9, 7.5, 8.8, 7.2, 10.9, 1.2, 2.3, 3.3, 1.8, 6.6, 7.9, 5.5, 4.2, 7, 5.6, 5.5, 8.9, 3.1, 1.2, 6.8, 8.3, 2.6, 6, 3.5, 5.5, 3.2, 1.2, 5.2, 6.4, 6.2, 6, 4, 6.3, 6, 3.7, 8, 1.8, 5.5, 6.7, 7.9, 5.5, 6.5, 5.3, 8.4, 4.4, 6.3, 2.4, 6.7, 2.1, 1.8, 5.8, 7.1, 3, 8.1, 7.2, 5.9, 2.3, 4.1, 7.7, 7.3, 6.1, 6.6, 6, 4.7, 8.3, 8, 6.7, 8.3, 9.6, 8.6, 0, 4.7, 1.8, 7.3, 7.4, 3.5, 6.8, 4.9, 7.5, 4.5, 4.7, 6.8, -0.8, 2.6, 2.9, 4.9, 5.4, 2.6, 6.9, 3.3, 5.6, 8, 5.7, 6.2, 3.3, 4.7, 3.8, 5.1, 5.4, 4.8, 7.8, 4.6, 4, 3.5, 5.2, 5.7, 9.4, 6.1, 3.2, 5.6, 4.6, 9.4, 6.7, 9.2, 6.9, 8.1, 7.4, 6.3, 3.3, 6.8, 4.8, 10.1, 3.2, 6, 4.4, 8.1, 6.3, 6.4, 4.1, 2.7, 6.8, 3.5, 4.4, 2, 4.7, 7.3, 7.4, 1.7, 8, 10, 3.3, 8.1, 6.2, 6.8, 4.2, 9.8, 4.3, 10.7, 10.5, 3.7, 4.8, 8.9, 6.5, 6.9, 6.7, 7.5, 1.3]
        },
        {
          x: "Midday",
          y: [9, 11.5, 9.9, 8.7, 7.1, 9.5, 7.6, 9.5, 7.5, 7.5, 3.3, 6.7, 6.6, 12.5, 8.9, 5.5, 11.7, 5.9, 2.9, 11, 14.3, 8.7, 11.7, 8.2, 13.4, 8.5, 7.9, 4.4, 13.7, 8.7, 9.3, 5.5, 8.7, 5.1, 7.3, 7.9, 5.4, 7.9, 8.2, 12.6, 9.4, 6.9, 12.2, 15.6, 10.8, 11.7, 9.3, 6.1, 10.9, 9.5, 10.8, 13.4, 6, 6, 8, 8.7, 7.5, 8.9, 14.5, 5.5, 8.4, 4.7, 10.6, 8, 10.5, 12.1, 8.8, 10, 5.6, 7, 8.3, 8.6, 7.8, 9.8, 4.5, 5.9, 6.4, 10.1, 4.3, 6.4, 9, 7.2, 9.2, 7.7, 8.5, 8.6, 7.5, 4.8, 8.5, 6.3, 10.7, 9, 8.1, 8, 17.6, 8.7, 7.5, 7.3, 10.8, 11.7, 10.5, 8.3, 10, 4.4, 11.5, 7.8, 14.3, 7.8, 4.5, 13.9, 11.6, 4.4, 11.5, 9.1, 11.2, 1.9, 5.3, 6.9, 13.2, 6.4, 10.1, 9.5, 8.2, 7.6, 9.3, 5.6, 11.4, 17.1, 7.2, 6.3, 11.9, 14.2, 10.3, 9.4, 10.6, 11.2, 10.9, 7.6, 10.1, 10.1, 4.5, 3.5, 15.1, 6.7, 10.4, 4.9, 8.3, 7.6, 11, 10, 8.2, 9.2, 11.7, 8, 11.6, 11, 9.8, 6, 6.8, 8.5, 4.9, 7.7, 8.5, 10.1, 4, 9.9, 14.3, 7, 9.1, 13.1, 7, 7.3, 10, 14.3, 11.5, 3.8, 6.7, 7.9, 8.3, 6.7, 10.2, 9.7, 5.8, 6, 12.4, 6.3, 13.6, 11.1, 9.5, 7.5, 8.4, 11.4, 13.1, 10.5, 11.2, 4.9, 6.6, 8, 7.6, 13.4, 12, 11.5, 13.6, 7.2, 12.3, 13.1, 11.4, 7.9, 4.9, 14.1, 12.8, 5.1, 15.2, 7.8, 9.9, 8.1, 3, 9.4, 9.3, 8.4, 13, 15.7, 9.2, 2.2, 5.8, 9.1, 10.6, 9.5, 10.5, 9.3, 7.5, 6.9, 10, 10, 7.1, 7.4, 4.5, 11.2, 10.4, 10, 5.6, 5, 8.1, 5.7, 11.6, 13.7, 9.2, 8.5, 9.3, 10.4, 6.7, 15, 8.3, 15.2, 8.9, 13.8, 9.5, 7.5, 10.4, 1.6, 6, 9.8, 12, 7, 8.9, 9, 10.7, 3.3, 14.5, 7.8, 12.2, 8.7, 7.1, 11.8, 10, 8.2, 9.7, 9.3, 11.4, 8, 9.9, 8.1, 8.7, 14, 8.9, 8.1, 13.7, 14.7, 7.9, 7.7, 13, 3.8, 12.3, 8.8, 7.9, 6.9, 6.7, 8.9, 12, 15.6]
        },
        {
          x: "Evening",
          y: [18.2, 12.3, 15.1, 12.4, 11, 12.5, 15, 13.5, 15.6, 5.4, 14.4, 14.2, 13.9, 12.6, 8.2, 19.4, 18.8, 5.3, 9.7, 19.2, 10.5, 15.2, 14.8, 14.8, 13.8, 5.8, 4.2, 11.5, 15, 12.6, 15.7, 11.5, 7.9, 12, 16.2, 11.1, 12.6, 17.7, 11.2, 12.7, 9.8, 15.3, 11.9, 11.3, 15, 10.5, 13.1, 14.6, 13, 10.2, 16.3, 10.5, 7.9, 12.4, 17.1, 6.6, 5.8, 17.3, 13.8, 6.7, 14.2, 13.3, 9.2, 14.8, 15.1, 10.6, 12.7, 11.2, 12.2, 8.7, 7.2, 14.2, 9.8, 19, 9.9, 13.8, 10.4, 10, 16.6, 8.6, 9.3, 17.3, 15.6, 10.6, 12.1, 9.1, 11.3, 9.2, 11.3, 4.8, 7.1, 14, 14.7, 14.4, 20.2, 9, 13.3, 14.6, 13, 8.5, 16.7, 18, 8.9, 14.1, 12.9, 13.7, 11.3, 17.3, 9.8, 20.8, 22.9, 18.2, 15.8, 12.5, 15.8, 12.9, 5, 13.9, 17.2, 9.7, 6.7, 8.8, 8.9, 7.1, 10.8, 7.6, 11.6, 12.1, 11.4, 12.2, 6.6, 13.3, 20.8, 13.5, 9.2, 14.9, 14.5, 3.5, 14.8, 11.6, 9.7, 9.2, 15.4, 17.5, 14.5, 6.3, 10.5, 15.1, 7, 15.2, 11.6, 11.5, 12.3, 8.5, 16, 5.4, 5.2, 11.8, 9.8, 10.5, 7.1, 13.3, 12.8, 11.9, 11.9, 8.8, 3.7, 9.8, 10.8, 9.8, 4.5, 5.7, 7.4, 18.3, 8.1, 9.4, 14.5, 19.4, 12, 17.8, 18.6, 15, 16, 12.1, 17.2, 13.4, 8.8, 19, 15.8, 15.1, 13.5, 16.4, 11.9, 18.8, 11.3, 9.6, 5.5, 11.6, 13.1, 15.4, 12.5, 17.3, 9.6, 12.3, 16.4, 4.6, 12.7, 9.1, 13.2, 10.1, 6.1, 15.1, 11.6, 13.4, 12.4, 10.9, 10, 8.2, 13, 8.1, 17.1, 11.7, 10.2, 14.8, 11.1, 16, 8.6, 13.5, 6.1, 20.1, 13.6, 9.1, 12.3, 7.3, 16.1, 14, 13.6, 7.1, 21.5, 7, 16.4, 7.1, 12.7, 20.2, 7.6, 17.8, 13.7, 18.5, 4.4, 8.6, 15.9, 12.1, 13.6, 16.2, 8.5, 11.6, 8.1, 15.2, 10.8, 10.8, 12.7, 15.9, 14.9, 10.8, 10.3, 7.3, 8.2, 10.6, 8.4, 6.9, 10.7, 13.9, 7.8, 18.6, 6.1, 7, 9.2, 18.1, 22.6, 12, 16.1, 9.5, 10.5, 15.7, 12.6, 11.6, 14.1, 15.4, 14.4, 13.1, -1.4, 11, 7.5, 15.6, 10.2, 13.8, 5.4, 15.9, 9.1, 14.4]
        }
      ]
    }
  ],
  plotOptions: {
    bar: {
      horizontal: true
    },
    violin: {
      points: {
        shape: "square",
        size: 1.6,
        opacity: 0.55,
        jitter: 0.9
      },
      box: {
        width: "10%"
      }
    }
  },
  title: {
    text: "Train delay by time of day (min)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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