# ViolinChart

> Violin plot: a Gaussian kernel density mirrored around each category axis, with an optional inner box or quartile lines.

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

Violin plot: a Gaussian kernel density mirrored around each category axis,
with an optional inner box or quartile lines. Two series can share one
split violin per category to compare them side by side.

## Import

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

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

## Usage

```tsx
<ViolinChart
  title="Duración por tipo de servicio"
  categories={services}
  series={[{ id: "duracion", name: "Duración", data: durations }]}
  valueFormat={minutes}
  valueAxis={{ title: "min" }}
  orientation="vertical"
  inner="box"
  split={false}
  scale="width"
  height={340}
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `categories` * | `readonly string[]` |  |  |
| `series` * | `readonly DistributionSeries[]` |  | `data[i]` holds the raw samples of `categories[i]`. |
| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` |  |
| `valueFormat` | `ValueFormat` |  |  |
| `valueAxis` | `DistributionAxisOptions` |  |  |
| `inner` | `"none" \| "box" \| "quartiles"` | `"box"` | What is drawn inside each violin: a slim box, quartile lines or nothing. |
| `split` | `boolean` | `false` | Two series share one violin per category: the first on the left (top when horizontal), the second on the right. Ignored unless exactly two series are visible. |
| `bandwidth` | `number` |  | Kernel bandwidth in data units; Silverman's rule per violin by default. |
| `scale` | `"area" \| "width"` | `"width"` | "width": every violin uses its full width (shapes compare, sizes do not). "area": one density scale for all, so a wider violin means a denser peak. |
| `showPoints` | `boolean` | `false` | Every raw observation as a dot inside the violin, spread by its density. |
| `jitter` | `number` | `0.8` | Share (0-1) of the local violin width the dots spread over. |
| `pointColor` | `"value" \| "series"` | `"series"` | "value" grades each dot from pale to full colour across the value range. |
| `seed` | `number` | `11` | Seed of the jitter, so the dots are stable between renders. |
| `height` | `number \| "fill"` | `340` |  |
| `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-violinchart--default)
- [Quartiles](/storybook/?path=/story/charts-violinchart--quartiles)
- [Horizontal](/storybook/?path=/story/charts-violinchart--horizontal)
- [Split](/storybook/?path=/story/charts-violinchart--split)
- [Grouped Side By Side](/storybook/?path=/story/charts-violinchart--grouped-side-by-side)
- [Waiting Times](/storybook/?path=/story/charts-violinchart--waiting-times)
- [With Points](/storybook/?path=/story/charts-violinchart--with-points)
- [Colour Graded Jitter](/storybook/?path=/story/charts-violinchart--colour-graded-jitter)
- [Narrow](/storybook/?path=/story/charts-violinchart--narrow)
- [Loading](/storybook/?path=/story/charts-violinchart--loading)
- [Empty](/storybook/?path=/story/charts-violinchart--empty)

## Source

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