Basic scatter

import WestCoastCharts from 'west-coast-charts'

const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "scatter",
    zoom: {
      enabled: true,
      type: "xy"
    },
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Group A",
      data: [
        [160.7, 56.8],
        [169, 57.5],
        [163.3, 60.1],
        [172.6, 66.6],
        [175.1, 68.9],
        [162.6, 61.9],
        [150.4, 60.1],
        [158.2, 57.5],
        [158.5, 64.1],
        [161.5, 70.8],
        [168.2, 67.9],
        [173.4, 76.5],
        [169, 67],
        [162.4, 66.6],
        [163.6, 70.1],
        [169.1, 65.2],
        [155.5, 57.5],
        [150.9, 60.7],
        [166.4, 61.3],
        [157.8, 67.3],
        [176.7, 74.2],
        [159.7, 67],
        [172.8, 74.5],
        [164.6, 66.9],
        [160.7, 67.1],
        [163, 73.2],
        [173, 72.5],
        [169.8, 62.3],
        [158.8, 70.8],
        [170.9, 73.2],
        [169.7, 72.7],
        [159.4, 65.3],
        [169.1, 64.3],
        [175.6, 75.2],
        [172.2, 69.3],
        [173.8, 71],
        [161.5, 66.6],
        [175, 66.4],
        [169.1, 69.9],
        [156.4, 70]
      ]
    },
    {
      name: "Group B",
      data: [
        [161, 69.9],
        [180.5, 78.5],
        [170.1, 77.2],
        [164.9, 73.1],
        [158.2, 62.7],
        [163, 65.9],
        [178.6, 68.4],
        [166.4, 64.2],
        [171.7, 62.7],
        [175.5, 74.5],
        [182.1, 72.8],
        [175.2, 71.3],
        [166.3, 59.8],
        [174.2, 71.8],
        [172, 77],
        [161.8, 63.6],
        [174.3, 66.5],
        [188.7, 83.9],
        [169.9, 73.4],
        [177.1, 77.4],
        [178.7, 70.8],
        [177.9, 65.9],
        [176.4, 65.5],
        [176.6, 60.3],
        [160.8, 72.7],
        [193, 78.1],
        [163.6, 63.7],
        [170, 62.4],
        [167.9, 72.9],
        [180.1, 69.8],
        [180.8, 78.6],
        [171.8, 71.5],
        [175.8, 75.5],
        [177.7, 69.9],
        [158.8, 56.8],
        [168.2, 66],
        [177.1, 70.4],
        [173.8, 85.6],
        [161, 72.4],
        [169.4, 64.4]
      ]
    },
    {
      name: "Group C",
      data: [
        [179.6, 69.2],
        [168.5, 71.2],
        [177, 80],
        [192.3, 81.1],
        [188.3, 69.1],
        [175.4, 64.7],
        [172.5, 61.7],
        [177.9, 75.2],
        [172.3, 79.3],
        [177.3, 67.6],
        [187.1, 88.9],
        [190, 76.4],
        [177.7, 73.3],
        [182, 73.9],
        [177.9, 67.5],
        [172, 66.1],
        [173, 75.8],
        [169, 55.5],
        [174.3, 69],
        [173.2, 69.5],
        [190.7, 76.3],
        [175.2, 71.9],
        [182.5, 74],
        [168.5, 75.1],
        [181.5, 74.7],
        [170.4, 71.5],
        [175.2, 75.3],
        [180.6, 81.8],
        [183.2, 70.2],
        [175, 71.8],
        [173.6, 69.6],
        [176.3, 76.1],
        [181.2, 75.8],
        [178.6, 75.8],
        [163.2, 60.3],
        [176.3, 72.1],
        [177.6, 75],
        [180.1, 70.4],
        [183.8, 69.1],
        [177.3, 75]
      ]
    }
  ],
  xaxis: {
    tickAmount: 8,
    title: {
      text: "Height cm"
    }
  },
  yaxis: {
    title: {
      text: "Weight kg"
    }
  },
  markers: {
    size: 5
  },
  title: {
    text: "Height vs weight"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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