# Simple bubble (Bubble example)

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

Three product groups by price, rating and sales.

- Chart type: `bubble` (Bubble)
- Collection: Bubble · Bubble
- Raw configuration: https://westcoast-charts.com/gallery-src/bubble/simple-bubble.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/bubble/simple-bubble.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: "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()
```

## 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 bubble-simple-bubble.json --out bubble-simple-bubble.svg --with-table` (save the options above as JSON first)