# Basic scatter (Scatter example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/scatter/scatter-basic/ · Index for agents: https://westcoast-charts.com/llms.txt

Height against weight for three groups.

- Chart type: `scatter` (Scatter)
- Collection: Scatter · Scatter
- Raw configuration: https://westcoast-charts.com/gallery-src/scatter/scatter-basic.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/scatter/scatter-basic.html

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
```

## Options

```js
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()
```

## Verify

- Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page.
- Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export scatter-scatter-basic.json --out scatter-scatter-basic.svg --with-table` (save the options above as JSON first)