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.

Import

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

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

Usage

<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
• Vertical
• Sized By Ticket
• Colored By Series
• Narrow
• Loading
• Empty

Source

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