title: "Beeswarm Chart" slug: "/packages/beeswarm-chart" category: "charts" componentNames:
- "BeeswarmChart"
Beeswarm Chart
The BeeswarmChart component renders a beeswarm plot with built-in support for timeseries.
import BeeswarmChart from "@ds-kit/beeswarm-chart"
Basic Example
By default the BeeswarmChart component will render a beeswarm plot with dummy data and a slider. Use this basic setup for quick prototyping.
<BeeswarmChart />
Custom labels
It is possible to pass a custom component to render customised labels.
<BeeswarmChart
labels={["Bad", "Good"]}
labelComponent={(text, i) => (
<Div
px="0.5rem"
mx="0.5rem"
borderRadius="15px"
color="white"
bg={i ? "green.500" : "orange.500"}
>
{text}
</Div>
)}
/>
Custom ticks
It is also possible to render custom components for the scale ticks.
<BeeswarmChart
tickValues="on"
tickComponent={(tick, i) => <Div color="orange.500">{i % 2 ? "" : tick}</Div>}
/>
Custom symbols
It is possible to use custom components to render custom symbols.
<BeeswarmChart
symbol={d => (
<Div
width={24}
height={24}
borderRadius="50%"
color="white"
bg="green.500"
textAlign="center"
>
{d.id}
</Div>
)}
/>
Tooltip
Symbols can have tooltips. The content of the tooltip can be customised using the tooltipFormat
prop.
<BeeswarmChart tooltipFormat={d => d.id + " – " + d.value} />
Without slider
It is also possible render a simple beeswarm plot without a slider.
<BeeswarmChart slider={false} />