# RaincloudChart

> Raincloud plot (horizontal): a half violin "cloud" for the shape, a slim box for the summary and the jittered raw observations falling below as "rain", so nothing about the distri…

Source: https://ui.jcsoftdev.com/docs/components/raincloud-chart

Raincloud plot (horizontal): a half violin "cloud" for the shape, a slim
box for the summary and the jittered raw observations falling below as
"rain", so nothing about the distribution is hidden.

## Import

```ts
import { RaincloudChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/raincloud-chart`.

## Usage

```tsx
<RaincloudChart
  title="Tiempo de espera por barbero"
  categories={barbers}
  series={[{ id: "espera", name: "Espera", data: waitMinutes }]}
  valueFormat={minutes}
  valueAxis={{ title: "minutos de espera", min: 0 }}
  rain
  pointRadius={2.5}
  showMean
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `categories` * | `readonly string[]` |  | One row per category, e.g. barbers or time slots. |
| `series` * | `readonly DistributionSeries[]` |  | `data[i]` holds the raw samples of `categories[i]`. Several series stack inside a row. |
| `valueFormat` | `ValueFormat` |  |  |
| `valueAxis` | `DistributionAxisOptions` |  |  |
| `bandwidth` | `number` |  | Kernel bandwidth in data units; Silverman's rule per cloud by default. |
| `rain` | `boolean` | `true` | Draw the raw observations under the box. |
| `pointRadius` | `number` | `2.5` | Radius of each raw point in pixels. |
| `showMean` | `boolean` | `true` |  |
| `seed` | `number` | `7` | Seed of the vertical jitter, so the rain is stable between renders. |
| `height` | `number \| "fill"` |  | Height of the drawing; grows with the number of rows by default. |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `legend` | `boolean \| "top" \| "bottom"` |  |  |
| `grid` | `boolean` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `animate` | `boolean` | `true` |  |
| `labels` | `Partial<DistributionLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-raincloudchart--default)
- [Without Rain](/storybook/?path=/story/charts-raincloudchart--without-rain)
- [Weekday Vs Saturday](/storybook/?path=/story/charts-raincloudchart--weekday-vs-saturday)
- [Average Ticket](/storybook/?path=/story/charts-raincloudchart--average-ticket)
- [Narrow](/storybook/?path=/story/charts-raincloudchart--narrow)
- [Loading](/storybook/?path=/story/charts-raincloudchart--loading)
- [Empty](/storybook/?path=/story/charts-raincloudchart--empty)

## Source

`packages/ui/src/charts/raincloud-chart/raincloud-chart.tsx`