# Horizontal box plot with points (Boxplot example)

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

Horizontal boxes with jittered observations (raincloud form).

Why it matters: raincloud type: box + jittered rain points + half-violin, horizontal, with collision-free jitter

- Chart type: `raincloud` (Raincloud)
- Collection: Boxplot · Box plot
- Raw configuration: https://westcoast-charts.com/gallery-src/boxplot/horizontal-boxplot-with-points.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/boxplot/horizontal-boxplot-with-points.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: "raincloud",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Minutes",
      data: [
        {
          x: "Bus",
          y: [20.1, 27.2, 22.6, 29.5, 22.3, 31.1, 14, 10, 12.4, 16.1, 28, 15.8, 30, 15.3, 20.8, 19.1, 22.1, 21.9, 16.2, 29.9, 23.6, 24.6, 30.9, 22.7, 20.6, 23.4, 27.5, 24.6, 17.9, 31.2, 19.8, 18.6, 20.2, 31.5, 31, 28.8, 20.9, 17.9, 20.5, 23.6, 26.7, 22.2, 30.1, 22.2, 12.2, 16.9, 20.2, 23.4, 20.7, 14.4, 10.4, 21.9, 16.8, 19.3, 19.4, 23.4, 11.1, 30.9, 14.3, 18.6, 29.6, 13.3, 23.8, 15.5, 14.8, 25.5, 24.2, 14.3, 24.5, 19.7]
        },
        {
          x: "Tram",
          y: [29.3, 26, 27, 37.2, 26.8, 29, 31.4, 20.5, 24.6, 33.4, 35.2, 20.3, 28.5, 22.5, 25.1, 21.3, 26.7, 36, 25.6, 25.6, 25.4, 20.5, 24.6, 23.1, 25, 31.4, 20.4, 19.6, 29.2, 20, 34.5, 27.3, 26.9, 26.3, 33.2, 34.1, 21.5, 30.7, 35, 19.5, 30.5, 31.9, 22.3, 28.8, 33.6, 23.3, 21.6, 24.9, 36.1, 26.3, 19.2, 34.3, 26.2, 28.6, 31, 22.6, 29.1, 33.6, 16.2, 27.4, 24.4, 24, 29.9, 17.2, 26.3, 37.1, 25.6, 24.7, 27.9, 27.9]
        },
        {
          x: "Bike",
          y: [33.9, 26.4, 24.5, 33.9, 32.3, 20.6, 31.8, 38.3, 36.2, 26.7, 29.4, 26.8, 29.1, 29.4, 29.7, 28.2, 23.8, 44.5, 25.9, 25.4, 25.5, 23.9, 25.7, 27.6, 25.8, 34.7, 28.8, 25.2, 32.3, 33.1, 34, 31.8, 29.3, 34.1, 21.9, 35.2, 33.3, 35.3, 28.3, 33.4, 32.7, 32.6, 36, 28.8, 37.3, 33.1, 31.3, 26.9, 35.6, 29.3, 23.4, 32.4, 26.6, 33.9, 33.1, 36.4, 35.6, 28.3, 34.4, 13.2, 26, 36.9, 29.4, 29.5, 37.6, 33.4, 33.5, 26.3, 36.6, 29.8]
        },
        {
          x: "Car",
          y: [35.3, 33.2, 32.9, 29.1, 32.3, 39.9, 32.6, 28.7, 33.7, 40, 33.8, 32.5, 45.5, 34.7, 31.6, 36.5, 43.5, 38.7, 41.4, 30.7, 36.4, 30.1, 38.3, 34.1, 39.7, 32.2, 29.8, 39.6, 38.4, 27.9, 29.4, 35.1, 43.7, 36.7, 29.9, 28.1, 22.4, 37, 27.6, 35.1, 34.9, 34.7, 27.8, 40.6, 28.1, 30.7, 41.8, 36.5, 33.8, 38, 36.6, 31.9, 36.2, 46, 35.1, 36.2, 37.9, 20.4, 34.7, 37.1, 29.5, 32.6, 27.3, 32.3, 34.4, 34, 36, 33.7, 36, 42.4]
        }
      ]
    }
  ],
  plotOptions: {
    bar: {
      horizontal: true
    }
  },
  title: {
    text: "Commute time by mode (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 boxplot-horizontal-boxplot-with-points.json --out boxplot-horizontal-boxplot-with-points.svg --with-table` (save the options above as JSON first)