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} />