Simple bubble

import WestCoastCharts from 'west-coast-charts'

const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "bubble",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Audio",
      data: [
        [173, 3.8, 59],
        [337, 4.4, 9],
        [378, 4.9, 16],
        [147, 3.1, 49],
        [255, 4.3, 17],
        [178, 3.1, 20],
        [122, 3.9, 8],
        [288, 3.4, 10],
        [126, 4, 33],
        [148, 5, 58]
      ]
    },
    {
      name: "Wearables",
      data: [
        [124, 3.3, 34],
        [273, 4.2, 37],
        [61, 4.9, 30],
        [94, 4.7, 7],
        [78, 3.1, 15],
        [57, 3.4, 15],
        [182, 3.6, 39],
        [179, 4.5, 58],
        [305, 4.9, 41],
        [375, 3.7, 54]
      ]
    },
    {
      name: "Home",
      data: [
        [162, 4.3, 33],
        [360, 4.8, 18],
        [384, 4.5, 54],
        [114, 3.7, 25],
        [370, 4.9, 35],
        [296, 4.6, 5],
        [334, 4.7, 7],
        [349, 3.6, 56],
        [121, 3, 27],
        [110, 4.1, 23]
      ]
    }
  ],
  xaxis: {
    title: {
      text: "Price €"
    },
    tickAmount: 8
  },
  yaxis: {
    min: 2.8,
    max: 5.2,
    title: {
      text: "Rating"
    }
  },
  fill: {
    opacity: 0.7
  },
  dataLabels: {
    enabled: false
  },
  title: {
    text: "Price vs rating (size = units k)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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