# Violin with jitter (Violin example)

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

Densities with every observation jittered on top.

- Chart type: `violin` (Violin)
- Collection: Violin · Violin
- Raw configuration: https://westcoast-charts.com/gallery-src/violin/violin-with-jitter.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/violin/violin-with-jitter.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: "Session min",
      data: [
        {
          x: "Free",
          y: [9.1, 3.6, 9, 9.8, 20.6, 10.7, 12, 11.4, 12.2, 10.4, 16.8, 9.7, 10.1, 16.9, 12.4, 17.7, 12.9, 20.1, 15.4, 17.8, 16, 16.8, 15.6, 8, 12.2, 11.8, 12, 12.2, 10.3, 18.9, 10.3, 17.7, 12.4, 5.7, 5.4, 18.8, 3.5, 13.4, 11.6, 15.2, 13.4, 3.9, 16.9, 13.8, 13, 7.7, 16, 9.7, 10.6, 21.4, 10.5, 10.2, 20.2, 9.6, 15.3, 8.4, 5.8, 14, 8, 11.4, 20.1, 16.1, 10.8, 14.9, 7.9, 12.8, 15.7, 12.7, 11.1, 9, 8, 14.5, 14.2, 10, 17.8, 11.7, 12.3, 7.2, 10.1, 11.5, 10.7, 13.3, 13.4, 17.2, 16.3, 12.3, 19.2, 13.2, 16.4, 9]
        },
        {
          x: "Team",
          y: [21.7, 20.8, 28.9, 12.6, 10.9, 15, 12.1, 19.1, 17.5, 16.7, 20.7, 18.5, 16.5, 28.4, 19.1, 22.4, 20.1, 15.8, 9.1, 17.5, 12.1, 17, 20.1, 23.4, 8.6, 27.6, 13.1, 11.2, 14.6, 17.9, 21.9, 16.9, 14.5, 9.7, 21.5, 12.6, 6.4, 10.3, 16.1, 18.9, 20.1, 15.6, 15, 21.6, 23.5, 9.8, 12.5, 16.8, 7.8, 18.8, 21.3, 20.6, 2.5, 22.2, 16.7, 13.7, 22.3, 19.2, 18.8, 26, 16.9, 17.3, 14.9, 20.9, 10.7, 28, 14.5, 17.6, 17.5, 16.4, 22.7, 19.9, 16, 29.4, 14.5, 17.8, 30.8, 22.3, 15.8, 10.7, 21.4, 20, 19, 17.5, 22.4, 17.8, 17.9, 19.9, 5.5, 21.1]
        },
        {
          x: "Business",
          y: [22.6, 40.3, 30.7, 15.5, 34.3, 15.7, 27.5, 12, 23, 20.3, 23.5, 19.6, 14.5, 26.4, 30, 25.9, 14.3, 27.4, 14.4, 25.7, 29, 34.9, 18.2, 26.1, 21.8, 21.7, 27.6, 26.2, 25.9, 26.9, 15.3, 32.6, 20.7, 21.4, 24, 25.4, 15, 24.9, 9.6, 22.6, 19.7, 25.5, 23.8, 7.8, 22.9, 22.6, 24.9, 25.8, 14.8, 15.8, 34.8, 18.8, 10.6, 22.2, 18.2, 25.2, 31.1, 23.7, 25.3, 22, 26.5, 23.4, 36, 26.9, 23.9, 30.7, 23.5, 21.2, 31.3, 10.5, 32, 31, 31.5, 22, 12.5, 21.5, 24.5, 23.9, 42.9, 18.9, 37.6, 16.7, 21.7, 24.4, 21.4, 29.6, 28.9, 19.6, 29, 24.8]
        }
      ]
    }
  ],
  plotOptions: {
    bar: {
      distributed: true
    },
    violin: {
      points: {
        size: 2
      }
    }
  },
  title: {
    text: "Session length by plan (min)"
  },
  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-with-jitter.json --out violin-violin-with-jitter.svg --with-table` (save the options above as JSON first)