# Horizontal violin (Violin example)

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

Order value per region, horizontal.

- Chart type: `violin` (Violin)
- Collection: Violin · Violin
- Raw configuration: https://westcoast-charts.com/gallery-src/violin/horizontal-violin.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/violin/horizontal-violin.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: "Order €",
      data: [
        {
          x: "North",
          y: [48.1, 53.8, 43.3, 60.6, 65, 54.8, 61.1, 42.2, 54.6, 40.7, 47, 44.6, 70.2, 41.9, 81.5, 33.5, 40.4, 66.9, 81.1, 66.5, 78.2, 46.7, 66.9, 52.3, 80.5, 71, 54.9, 67.2, 72.6, 80.9, 76.3, 34.6, 74.8, 75.1, 83.3, 37.1, 78.8, 56.7, 59.9, 75.7, 70.7, 64.4, 54.9, 64.6, 53.6, 56.4, 74.3, 65.1, 64.7, 53.8, 59.7, 59.7, 66.7, 56.3, 42.8, 62.5, 52.6, 44.5, 64.8, 48.9, 59.4, 76.5, 64.8, 81.9, 57.7, 64, 56.8, 86.5, 51.5, 37.6, 57.1, 61, 60.8, 63.4, 63, 49.7, 61.5, 79, 58.5, 54.9, 62.6, 55.5, 80.2, 72.5, 65.7, 68.2, 39.5, 70.3, 88.4, 68.1, 78.4, 85.1, 50.8, 60.4, 64.3, 61.4, 56, 69, 66.7, 57, 75.3, 42.7, 54.7, 50.5, 79.8, 39.4, 35.4, 63.7, 72.3, 64, 62.6, 71.4, 46.3, 66, 54.7, 58.1, 72.3, 63.1, 61.7, 62.7]
        },
        {
          x: "South",
          y: [83.9, 71.8, 92.6, 79.1, 57.5, 83.5, 74.8, 47.6, 73.8, 73, 70.2, 95.6, 57.2, 91.2, 88.5, 88.2, 80.3, 80.3, 71.5, 67.3, 45.4, 56, 58.2, 55.4, 66.6, 80.1, 68.9, 86.3, 51.3, 86.8, 46.7, 70.5, 74.6, 82.1, 67.9, 54.1, 79.3, 66.3, 60.3, 82, 90.9, 79.4, 73.2, 75.8, 58, 79.7, 71.2, 42.1, 78.8, 70.9, 52.3, 68.6, 53.5, 47.5, 63.9, 85.9, 60.8, 73.1, 59.2, 67.6, 89.4, 70.7, 68.6, 75.8, 59.2, 60.3, 68.9, 64.8, 35.3, 82.1, 69.3, 65.4, 56.7, 70.2, 63.4, 71.6, 81.2, 46.8, 63.5, 81.3, 75.1, 75.3, 86.9, 78, 94.3, 59.7, 77.9, 64.2, 61.1, 68.2, 86.1, 92.6, 35.7, 65.4, 58.9, 75.2, 82.9, 59.4, 70.5, 75.5, 76.5, 64.2, 64.1, 43.5, 74.8, 77.5, 94, 54.5, 72.1, 66.7, 73.4, 78.9, 67.9, 56.5, 50, 46.4, 71.7, 82, 66.5, 66.9]
        },
        {
          x: "East",
          y: [81.7, 70.2, 98.9, 65.8, 55.2, 63.1, 94.1, 72.2, 70.4, 72.5, 83, 66.1, 81.4, 83.1, 96.2, 92, 90.8, 71.7, 61.1, 91.5, 93.3, 84, 80.6, 76.1, 61.5, 81.6, 92.7, 75.1, 54.7, 72.6, 57.3, 78.7, 95.6, 87.9, 74.4, 88.1, 63.4, 83.5, 98.5, 73.2, 81.1, 81.7, 100.1, 80.8, 69.6, 103, 69.8, 74.7, 58.3, 70.9, 81.7, 87.8, 75, 76.7, 82.3, 65.6, 63.5, 75.3, 63.8, 70, 75, 87.3, 89, 55.8, 73.9, 85.8, 92.1, 96, 98.6, 78.6, 84, 56.8, 79.9, 79.5, 68.9, 47, 76.4, 76.3, 79.9, 82.6, 88.8, 63.3, 82.7, 81.5, 56.1, 76.9, 70, 54.9, 55.6, 78.4, 88.9, 84.1, 96.8, 100.3, 54.5, 91.9, 85.9, 60.8, 62.6, 88.3, 64.9, 89.1, 81.7, 58.5, 64.2, 94.1, 95.6, 83.6, 85.1, 96.2, 72.9, 99.1, 84.8, 81.1, 67.7, 70, 60.2, 87.2, 65.4, 83.2]
        },
        {
          x: "West",
          y: [72.3, 78.4, 78.5, 93.1, 66.4, 78.4, 58.1, 95.7, 75.2, 92.1, 87.5, 100.8, 104.4, 72.3, 63, 89.6, 88.8, 118.4, 61.2, 87.3, 91.8, 70.7, 93.5, 85, 78.3, 78.8, 110.7, 107.4, 111, 90.8, 91.2, 99.2, 95.2, 73.9, 80.8, 101.8, 107.4, 72.5, 63.8, 83.3, 71.3, 112.1, 93, 102.6, 82.2, 53.1, 79.7, 100.9, 70.3, 91.5, 84.6, 81, 75.9, 95.4, 81.6, 61.6, 86.1, 83.9, 78.5, 75, 85, 79.7, 116.1, 82.8, 63.1, 87.8, 93.3, 66.9, 108.3, 88, 90.5, 87.7, 103.3, 67.2, 97.6, 98.6, 91.3, 71.3, 101.5, 99, 80.5, 83.8, 103.6, 85.8, 77.7, 89.1, 84, 82.1, 103.9, 78.1, 74.3, 102.8, 104.7, 45.7, 63.7, 80.5, 103.9, 79.2, 84.3, 93.3, 83.1, 81.9, 107.9, 75.8, 100.1, 91.2, 78.4, 97.4, 77.5, 44, 69.9, 67.1, 113.7, 89.9, 89.4, 107.7, 80.6, 91.1, 91.5, 115.4]
        },
        {
          x: "Central",
          y: [87.4, 76.3, 80.3, 97.2, 89.1, 103.8, 99.9, 95.7, 81.6, 113.9, 105.4, 97.4, 115.4, 115.8, 136.9, 110.6, 121.6, 100.2, 89.2, 112.8, 104.4, 90.3, 102.9, 125.2, 97.3, 76.2, 87.3, 90.3, 93.6, 90.3, 106.6, 69.4, 75.3, 99.3, 111.5, 91.4, 97.9, 94.8, 117.1, 123, 127.9, 98.5, 66.7, 97.6, 84.9, 99.4, 105.5, 102.8, 91.7, 103.8, 103.9, 105, 91.6, 75.7, 114.5, 95.2, 90.9, 93.3, 87.5, 91.2, 109.1, 97.7, 97.8, 95.2, 85.3, 109.1, 83.2, 98.2, 98.2, 83, 74.9, 105.3, 108.2, 101.9, 123.5, 88.8, 80.2, 109.3, 88.5, 73.6, 96.5, 99.1, 102.6, 115.7, 79.7, 112.4, 67.2, 74.8, 118.3, 88.2, 96.1, 97.5, 84.2, 100.8, 89.7, 109.4, 110.9, 96.1, 91.1, 86.7, 109.2, 93.9, 99.7, 104.4, 75.5, 68.3, 115.7, 113.1, 72.6, 86.2, 87.3, 93.7, 82.8, 117.7, 116.4, 71, 65.4, 78.9, 101.3, 54.9]
        }
      ]
    }
  ],
  plotOptions: {
    bar: {
      horizontal: true
    },
    violin: {
      box: {
        show: true
      },
      points: {
        show: false
      }
    }
  },
  title: {
    text: "Order value by region (€)"
  },
  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-horizontal-violin.json --out violin-horizontal-violin.svg --with-table` (save the options above as JSON first)