# Violin ⇄ swarm morph (Violin example)

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

Toggle between density shapes and individual points.

Why it matters: animated morph between violin and beeswarm by changing chart.type (dots fly to swarm positions), reduced-motion snaps

- Chart type: `violin` (Violin)
- Collection: Violin · Violin
- Raw configuration: https://westcoast-charts.com/gallery-src/violin/violin-to-jitter-morph.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/violin/violin-to-jitter-morph.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: "violin",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Response ms",
      data: [
        {
          x: "Payments",
          y: [196.2, 227, 254, 215.7, 237.3, 224.4, 198.6, 144.2, 190.9, 189.7, 212, 212, 183, 227.6, 271.7, 190.4, 218.4, 206.5, 217.9, 196.8, 169.7, 217.1, 187.8, 207.6, 184.5, 188.8, 227.7, 264.1, 218.3, 262.3, 181.6, 182.1, 201.7, 225.7, 197.5, 215.8, 172, 195.4, 215.8, 229.6, 208.5, 189.4, 222.7, 201.7, 200.8, 215.5, 229.8, 189.5, 213, 204.9, 242.4, 187.4, 225.4, 255.6, 245.7, 177.8, 214.4, 229.6, 211.1, 192.3, 182.8, 209.2, 204.3, 223.9, 187.3, 186.5, 171.7, 253.3, 216.1, 199.1]
        },
        {
          x: "Search",
          y: [119.6, 183.2, 181.6, 191.9, 153.7, 145.7, 178.6, 194.2, 244.2, 189.6, 177.3, 131.1, 153.1, 191.5, 164.9, 156.8, 170.1, 137.9, 182.4, 146.8, 151.5, 85.8, 167.2, 173.9, 154.1, 236.5, 148.2, 206.8, 130.9, 178.4, 160.2, 141.9, 144.8, 108.9, 171.1, 146, 175.4, 170, 163.2, 179.6, 158.1, 128.4, 186.7, 162.3, 128.9, 151, 143.6, 173.5, 147.6, 141.1, 223.6, 175.1, 176.4, 69.9, 145.1, 140.5, 186.7, 131.2, 159.3, 152.3, 171.5, 150.1, 164.5, 122.3, 146.5, 138.4, 184, 111.4, 171.6, 152.6]
        },
        {
          x: "Checkout",
          y: [242.8, 295.4, 294.6, 292.5, 318.3, 272.3, 250.8, 286.1, 260, 279.9, 309.8, 240.2, 325.6, 331.7, 306.6, 279.9, 292.5, 313.7, 316.4, 255.8, 298.5, 291.3, 285.8, 329, 320.1, 305.9, 299.9, 317.9, 258.3, 306.7, 252.1, 252.1, 342.7, 288.6, 292.9, 266.6, 276.3, 263.6, 263.9, 292.3, 284.3, 261.8, 273.1, 275.4, 250.1, 274.1, 275.3, 273.1, 281.4, 290, 312, 319.4, 249.3, 272.8, 327.7, 222.8, 300.7, 252.5, 253.6, 286.6, 266.7, 279.9, 283.4, 262.8, 290.5, 248.8, 291.7, 298.3, 281.6, 303.3]
        }
      ]
    }
  ],
  title: {
    text: "Response time (ms)"
  },
  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 violin-violin-to-jitter-morph.json --out violin-violin-to-jitter-morph.svg --with-table` (save the options above as JSON first)