# Explode to observations (Histogram example)

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

Bars break apart into the individual observations.

Why it matters: histogram ⇄ beeswarm type morph: bars break into individual dots and back (chart.type update)

- Chart type: `histogram` (Histogram)
- Collection: Histogram · Histogram
- Raw configuration: https://westcoast-charts.com/gallery-src/histogram/explode-to-observations.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/histogram/explode-to-observations.html

## Setup

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

WestCoastCharts.use(types)
```

## Options

```js
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "histogram",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Age",
      data: [39.7, 42.3, 30.5, 55.4, 42.4, 41.5, 45.1, 50.5, 28.8, 35.5, 43.6, 37.4, 39.5, 13.8, 47.2, 40.6, 41, 54.8, 41, 43.6, 39.9, 38.3, 17.6, 26.1, 39.5, 39.7, 54.9, 50.2, 28.6, 40.4, 39.1, 42.5, 54.7, 55.7, 54.4, 48.4, 21.5, 49.5, 32.2, 44.5, 30.7, 64.2, 45, 36.3, 50.5, 49.2, 40.8, 28.4, 40.9, 44.7, 43.9, 31.5, 36.2, 19.2, 37.2, 33.4, 40.8, 32.7, 33.8, 31.5, 45.8, 48.3, 47.8, 52.3, 25.3, 27.6, 47.8, 31.6, 32, 43.4, 22.8, 35.8, 41.6, 22.9, 37.9, 35.2, 30.2, 46.1, 36.4, 49, 39.9, 45.3, 59.8, 27, 45.1, 37.6, 43.3, 40, 50.1, 41.3, 23.4, 36.5, 35.9, 51.8, 43.1, 32, 41.6, 50.2, 43.4, 36.6, 19.5, 21.7, 36.2, 48.9, 35.9, 48.4, 60.9, 22.2, 54.1, 32, 44.4, 45.6, 61.8, 32.2, 45.8, 57.3, 31.3, 48.6, 45.3, 35.1, 43.7, 51.4, 37.2, 33.2, 48.5, 46.8, 62.7, 45.7, 45.7, 45.5, 51.9, 29.6, 43.6, 33.9, 30.5, 32.2, 33.1, 36, 43.3, 41.9, 36.8, 34.9, 33.6, 39.5, 39.3, 21.1, 47.2, 40.3, 46.7, 42, 30.6, 43.7, 54.1, 49.5, 37.1, 32.4, 56.9, 55.9, 42.1, 18.5, 43.2, 39.1, 22.6, 42.3, 45.7, 37.2, 32.1, 39.9, 32.8, 34, 21.8, 30.3, 40.6, 36.3, 45.6, 41.6, 48, 41.8, 38.6, 23.9, 46.9, 42.9, 29.7, 25.9, 37.8, 44.1, 68.7, 42.5, 45.8, 28.2, 45.2, 44.2, 39.6, 43.7, 23, 42, 30.7, 51.2, 33.8, 46.6, 20, 45.5, 31.9, 43.5, 29.4, 41.3, 58.9, 35.4, 31.6, 45.7, 33.1, 32.6, 39.1, 36.8, 41.7, 33, 53.4, 32.5, 53.1, 60.3, 43.3, 46.1, 37.8, 42.9, 39.8, 31.7, 39.4, 29.5, 53.9, 26.1, 38.2, 54.3, 37.7, 44.3, 51, 30.6, 43.2, 55, 42.1, 48]
    }
  ],
  title: {
    text: "Customer age"
  },
  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 histogram-explode-to-observations.json --out histogram-explode-to-observations.svg --with-table` (save the options above as JSON first)