# BeeswarmChart

> Beeswarm: every observation is a dot on the value axis, nudged sideways just enough that no two overlap, so clusters read as density while each point stays individually explorable.

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

Beeswarm: every observation is a dot on the value axis, nudged sideways
just enough that no two overlap, so clusters read as density while each
point stays individually explorable.

## Import

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

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

## Usage

```tsx
<BeeswarmChart
  title="Duración de cada corte por barbero"
  series={[{ id: "corte", name: "Corte", points: haircut(201) }]}
  valueFormat={minutes}
  valueAxis={{ title: "min" }}
  orientation="horizontal"
  radius={4.5}
  gap={1.25}
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `series` * | `readonly BeeswarmSeries[]` |  | Colors and legend; points of every series share the rows. |
| `categories` | `readonly string[]` |  | Row order; derived from the points (first seen first) when omitted. |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | "horizontal": values along x, one row per category. "vertical": one column per category. |
| `valueFormat` | `ValueFormat` |  |  |
| `valueAxis` | `DistributionAxisOptions` |  |  |
| `radius` | `number` | `4.5` | Radius of every point when there are no sizes (pixels). |
| `sizeRange` | `readonly [number, number]` | `[3, 14]` | Radius range for sized points: the largest size gets `max`, area-proportional. |
| `sizeFormat` | `ValueFormat` |  |  |
| `gap` | `number` | `1.25` | Space between points (pixels). |
| `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-beeswarmchart--default)
- [Vertical](/storybook/?path=/story/charts-beeswarmchart--vertical)
- [Sized By Ticket](/storybook/?path=/story/charts-beeswarmchart--sized-by-ticket)
- [Colored By Series](/storybook/?path=/story/charts-beeswarmchart--colored-by-series)
- [Narrow](/storybook/?path=/story/charts-beeswarmchart--narrow)
- [Loading](/storybook/?path=/story/charts-beeswarmchart--loading)
- [Empty](/storybook/?path=/story/charts-beeswarmchart--empty)

## Source

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