Horizontal box plot

import WestCoastCharts from 'west-coast-charts'

const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "boxPlot",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      data: [
        {
          x: "Home",
          y: [0.29, 1, 1.2, 1.4, 1.81]
        },
        {
          x: "Search",
          y: [0.66, 1.3, 1.5, 1.7, 2.04]
        },
        {
          x: "Product",
          y: [1.38, 1.6, 1.9, 2.1, 2.46]
        },
        {
          x: "Cart",
          y: [1.57, 1.9, 2.1, 2.3, 2.7]
        },
        {
          x: "Checkout",
          y: [1.79, 2.2, 2.4, 2.6, 3.14]
        },
        {
          x: "Account",
          y: [2.05, 2.5, 2.7, 2.9, 3.4]
        }
      ]
    }
  ],
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: "50%"
    },
    boxPlot: {
      colors: {
        upper: "#0d9488",
        lower: "#5eead4"
      }
    }
  },
  title: {
    text: "Page load time (s)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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