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.


0
100
2000
1900
2000
<BeeswarmChart />

Custom labels

It is possible to pass a custom component to render customised labels.

BadGood
0
100
2000
1900
2000
<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.


0
20
40
60
80
100
2000
1900
2000
<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.


0
100
2000
1900
2000
<BeeswarmChart
  symbol={d => (
    <Div
      width={24}
      height={24}
      borderRadius="50%"
      color="white"
      bg="green.500"
      textAlign="center"
    >
      {d.id}
    </Div>
  )}
/>

Symbols can have tooltips. The content of the tooltip can be customised using the tooltipFormat prop.


0
100
2000
1900
2000
<BeeswarmChart tooltipFormat={d => d.id + " – " + d.value} />

Without slider

It is also possible render a simple beeswarm plot without a slider.


0
100
<BeeswarmChart slider={false} />

BeeswarmChart props

Name

Type

Default

data

object

{
  byTime: {
    "1900": [
      { id: "A", value: 25 },
      { id: "B", value: 27 },
      { id: "C", value: 75 },
    ],
    "2000": [
      { id: "A", value: 50 },
      { id: "B", value: 27 },
      { id: "C", value: 25 },
    ],
  },
  domain: [0, 100],
}

width

number

height

number

200

time

number

symbol

func

symbolSize

number

30

tooltipFormat

func

tooltipOffset

array

labels

arrayOf

labelComponent

func

domain

arrayOf

slider

bool

true

sliderProps

object

{}

radius

number

side

"negative""positive""symetric"

"symetric"

selected

arrayOf

[]

keyValue

string

"value"

tickValues

"auto""on""off"

"auto"

tickComponent

func

Sections