Charts · Distributions & comparisons

BeeswarmChart

One point per observation, packed without overlap. Family: Distributions & comparisons · chart 39 of 60.

Reading time per reader
reader	minutes
R001	4
R002	17
R003	3
R004	6.5
R005	3.5
R006	3
R007	4.5
R008	23.5
R009	1
R010	1
R011	6.5
R012	4.5
R013	1.5
R014	7
R015	8.5
R016	3
R017	3
R018	8
R019	3
R020	4
R021	8
R022	6.5
R023	10.5
R024	16.5
R025	3.5
R026	5
R027	8
R028	5
R029	2
R030	1.5
R031	10
R032	4.5
R033	18.5
R034	3.5
R035	3
R036	9.5
R037	11.5
R038	11
R039	4.5
R040	3
R041	4.5
R042	11
R043	4
R044	5
R045	5.5
R046	6
R047	2.5
R048	4
R049	1
R050	1.5
R051	2.5
R052	4
R053	21.5
R054	5
R055	16.5
R056	6
R057	27.5
R058	3.5
R059	1.5
R060	20
R061	6.5
R062	11.5
R063	11
R064	4
R065	2
R066	1.5
R067	6
R068	14
R069	2
R070	4.5
R071	10.5
R072	3.5
R073	7.5
R074	4
R075	3.5
R076	7.5
R077	3
R078	2
R079	6
R080	4
R081	4
R082	4
R083	9.5
R084	13.5
R085	2
R086	2.5
R087	6
R088	12
R089	5
R090	5.5
R091	5
R092	14
R093	5
R094	3
R095	12.5
R096	6.5
R097	14
R098	8.5
R099	3.5
R100	9
R101	10
R102	8.5
R103	8.5
R104	6.5
R105	12
R106	4.5
R107	10.5
R108	8.5
R109	6
R110	9
R111	4
R112	7
R113	4
R114	2.5
R115	11.5
R116	2
R117	21.5
R118	14.5
R119	4.5
R120	8
R121	6.5
R122	5.5
R123	4
R124	9.5
R125	15.5
R126	11
R127	27
R128	1
R129	12
R130	8.5
R131	4
R132	3.5
R133	3
R134	15.5
R135	9
R136	17
R137	5.5
R138	6
R139	2
R140	10.5
R141	2
R142	12.5
R143	4
R144	1.5
R145	9.5
R146	5.5
R147	3.5
R148	11.5
R149	6
R150	4
R151	8
R152	9
R153	13
R154	2
R155	12
R156	1
R157	4.5
R158	2
R159	2
R160	5
R161	4.5
R162	1.5
R163	9.5
R164	6
R165	10
R166	7.5
R167	14.5
R168	5
R169	9.5
R170	3
R171	10.5
R172	8
R173	7.5
R174	4.5
R175	6
R176	1.5
R177	5
R178	2
R179	19.5
R180	3
R181	2.5
R182	5.5
R183	4.5
R184	3.5
R185	2
R186	5.5
R187	5.5
R188	3
R189	2.5
R190	10
R191	9.5
R192	3
R193	3
R194	2.5
R195	3
R196	11
R197	13
R198	10.5
R199	5
R200	6
R201	13.5
R202	6
R203	8.5
R204	7.5
R205	5
R206	3.5
R207	9
R208	5
R209	4.5
R210	7.5
R211	11.5
R212	18
R213	12
R214	2.5
R215	15
R216	9
R217	10
R218	3.5
R219	5
R220	8
R221	6.5
R222	15
R223	6.5
R224	3
R225	4
R226	2
R227	4
R228	8
R229	7
R230	6.5
R231	1.5
R232	9
R233	6
R234	6.5
R235	11.5
R236	5
R237	3.5
R238	4
R239	4.5
R240	4.5

Report an issue with this chart

Reading time per reader
reader	minutes
R001	4
R002	17
R003	3
R004	6.5
R005	3.5
R006	3
R007	4.5
R008	23.5
R009	1
R010	1
R011	6.5
R012	4.5
R013	1.5
R014	7
R015	8.5
R016	3
R017	3
R018	8
R019	3
R020	4
R021	8
R022	6.5
R023	10.5
R024	16.5
R025	3.5
R026	5
R027	8
R028	5
R029	2
R030	1.5
R031	10
R032	4.5
R033	18.5
R034	3.5
R035	3
R036	9.5
R037	11.5
R038	11
R039	4.5
R040	3
R041	4.5
R042	11
R043	4
R044	5
R045	5.5
R046	6
R047	2.5
R048	4
R049	1
R050	1.5
R051	2.5
R052	4
R053	21.5
R054	5
R055	16.5
R056	6
R057	27.5
R058	3.5
R059	1.5
R060	20
R061	6.5
R062	11.5
R063	11
R064	4
R065	2
R066	1.5
R067	6
R068	14
R069	2
R070	4.5
R071	10.5
R072	3.5
R073	7.5
R074	4
R075	3.5
R076	7.5
R077	3
R078	2
R079	6
R080	4
R081	4
R082	4
R083	9.5
R084	13.5
R085	2
R086	2.5
R087	6
R088	12
R089	5
R090	5.5
R091	5
R092	14
R093	5
R094	3
R095	12.5
R096	6.5
R097	14
R098	8.5
R099	3.5
R100	9
R101	10
R102	8.5
R103	8.5
R104	6.5
R105	12
R106	4.5
R107	10.5
R108	8.5
R109	6
R110	9
R111	4
R112	7
R113	4
R114	2.5
R115	11.5
R116	2
R117	21.5
R118	14.5
R119	4.5
R120	8
R121	6.5
R122	5.5
R123	4
R124	9.5
R125	15.5
R126	11
R127	27
R128	1
R129	12
R130	8.5
R131	4
R132	3.5
R133	3
R134	15.5
R135	9
R136	17
R137	5.5
R138	6
R139	2
R140	10.5
R141	2
R142	12.5
R143	4
R144	1.5
R145	9.5
R146	5.5
R147	3.5
R148	11.5
R149	6
R150	4
R151	8
R152	9
R153	13
R154	2
R155	12
R156	1
R157	4.5
R158	2
R159	2
R160	5
R161	4.5
R162	1.5
R163	9.5
R164	6
R165	10
R166	7.5
R167	14.5
R168	5
R169	9.5
R170	3
R171	10.5
R172	8
R173	7.5
R174	4.5
R175	6
R176	1.5
R177	5
R178	2
R179	19.5
R180	3
R181	2.5
R182	5.5
R183	4.5
R184	3.5
R185	2
R186	5.5
R187	5.5
R188	3
R189	2.5
R190	10
R191	9.5
R192	3
R193	3
R194	2.5
R195	3
R196	11
R197	13
R198	10.5
R199	5
R200	6
R201	13.5
R202	6
R203	8.5
R204	7.5
R205	5
R206	3.5
R207	9
R208	5
R209	4.5
R210	7.5
R211	11.5
R212	18
R213	12
R214	2.5
R215	15
R216	9
R217	10
R218	3.5
R219	5
R220	8
R221	6.5
R222	15
R223	6.5
R224	3
R225	4
R226	2
R227	4
R228	8
R229	7
R230	6.5
R231	1.5
R232	9
R233	6
R234	6.5
R235	11.5
R236	5
R237	3.5
R238	4
R239	4.5
R240	4.5

mode="precision"

Reading time per reader
reader	minutes
R001	4
R002	17
R003	3
R004	6.5
R005	3.5
R006	3
R007	4.5
R008	23.5
R009	1
R010	1
R011	6.5
R012	4.5
R013	1.5
R014	7
R015	8.5
R016	3
R017	3
R018	8
R019	3
R020	4
R021	8
R022	6.5
R023	10.5
R024	16.5
R025	3.5
R026	5
R027	8
R028	5
R029	2
R030	1.5
R031	10
R032	4.5
R033	18.5
R034	3.5
R035	3
R036	9.5
R037	11.5
R038	11
R039	4.5
R040	3
R041	4.5
R042	11
R043	4
R044	5
R045	5.5
R046	6
R047	2.5
R048	4
R049	1
R050	1.5
R051	2.5
R052	4
R053	21.5
R054	5
R055	16.5
R056	6
R057	27.5
R058	3.5
R059	1.5
R060	20
R061	6.5
R062	11.5
R063	11
R064	4
R065	2
R066	1.5
R067	6
R068	14
R069	2
R070	4.5
R071	10.5
R072	3.5
R073	7.5
R074	4
R075	3.5
R076	7.5
R077	3
R078	2
R079	6
R080	4
R081	4
R082	4
R083	9.5
R084	13.5
R085	2
R086	2.5
R087	6
R088	12
R089	5
R090	5.5
R091	5
R092	14
R093	5
R094	3
R095	12.5
R096	6.5
R097	14
R098	8.5
R099	3.5
R100	9
R101	10
R102	8.5
R103	8.5
R104	6.5
R105	12
R106	4.5
R107	10.5
R108	8.5
R109	6
R110	9
R111	4
R112	7
R113	4
R114	2.5
R115	11.5
R116	2
R117	21.5
R118	14.5
R119	4.5
R120	8
R121	6.5
R122	5.5
R123	4
R124	9.5
R125	15.5
R126	11
R127	27
R128	1
R129	12
R130	8.5
R131	4
R132	3.5
R133	3
R134	15.5
R135	9
R136	17
R137	5.5
R138	6
R139	2
R140	10.5
R141	2
R142	12.5
R143	4
R144	1.5
R145	9.5
R146	5.5
R147	3.5
R148	11.5
R149	6
R150	4
R151	8
R152	9
R153	13
R154	2
R155	12
R156	1
R157	4.5
R158	2
R159	2
R160	5
R161	4.5
R162	1.5
R163	9.5
R164	6
R165	10
R166	7.5
R167	14.5
R168	5
R169	9.5
R170	3
R171	10.5
R172	8
R173	7.5
R174	4.5
R175	6
R176	1.5
R177	5
R178	2
R179	19.5
R180	3
R181	2.5
R182	5.5
R183	4.5
R184	3.5
R185	2
R186	5.5
R187	5.5
R188	3
R189	2.5
R190	10
R191	9.5
R192	3
R193	3
R194	2.5
R195	3
R196	11
R197	13
R198	10.5
R199	5
R200	6
R201	13.5
R202	6
R203	8.5
R204	7.5
R205	5
R206	3.5
R207	9
R208	5
R209	4.5
R210	7.5
R211	11.5
R212	18
R213	12
R214	2.5
R215	15
R216	9
R217	10
R218	3.5
R219	5
R220	8
R221	6.5
R222	15
R223	6.5
R224	3
R225	4
R226	2
R227	4
R228	8
R229	7
R230	6.5
R231	1.5
R232	9
R233	6
R234	6.5
R235	11.5
R236	5
R237	3.5
R238	4
R239	4.5
R240	4.5

substrate="green"

Reading time per reader
reader	minutes
R001	4
R002	17
R003	3
R004	6.5
R005	3.5
R006	3
R007	4.5
R008	23.5
R009	1
R010	1
R011	6.5
R012	4.5
R013	1.5
R014	7
R015	8.5
R016	3
R017	3
R018	8
R019	3
R020	4
R021	8
R022	6.5
R023	10.5
R024	16.5
R025	3.5
R026	5
R027	8
R028	5
R029	2
R030	1.5
R031	10
R032	4.5
R033	18.5
R034	3.5
R035	3
R036	9.5
R037	11.5
R038	11
R039	4.5
R040	3
R041	4.5
R042	11
R043	4
R044	5
R045	5.5
R046	6
R047	2.5
R048	4
R049	1
R050	1.5
R051	2.5
R052	4
R053	21.5
R054	5
R055	16.5
R056	6
R057	27.5
R058	3.5
R059	1.5
R060	20
R061	6.5
R062	11.5
R063	11
R064	4
R065	2
R066	1.5
R067	6
R068	14
R069	2
R070	4.5
R071	10.5
R072	3.5
R073	7.5
R074	4
R075	3.5
R076	7.5
R077	3
R078	2
R079	6
R080	4
R081	4
R082	4
R083	9.5
R084	13.5
R085	2
R086	2.5
R087	6
R088	12
R089	5
R090	5.5
R091	5
R092	14
R093	5
R094	3
R095	12.5
R096	6.5
R097	14
R098	8.5
R099	3.5
R100	9
R101	10
R102	8.5
R103	8.5
R104	6.5
R105	12
R106	4.5
R107	10.5
R108	8.5
R109	6
R110	9
R111	4
R112	7
R113	4
R114	2.5
R115	11.5
R116	2
R117	21.5
R118	14.5
R119	4.5
R120	8
R121	6.5
R122	5.5
R123	4
R124	9.5
R125	15.5
R126	11
R127	27
R128	1
R129	12
R130	8.5
R131	4
R132	3.5
R133	3
R134	15.5
R135	9
R136	17
R137	5.5
R138	6
R139	2
R140	10.5
R141	2
R142	12.5
R143	4
R144	1.5
R145	9.5
R146	5.5
R147	3.5
R148	11.5
R149	6
R150	4
R151	8
R152	9
R153	13
R154	2
R155	12
R156	1
R157	4.5
R158	2
R159	2
R160	5
R161	4.5
R162	1.5
R163	9.5
R164	6
R165	10
R166	7.5
R167	14.5
R168	5
R169	9.5
R170	3
R171	10.5
R172	8
R173	7.5
R174	4.5
R175	6
R176	1.5
R177	5
R178	2
R179	19.5
R180	3
R181	2.5
R182	5.5
R183	4.5
R184	3.5
R185	2
R186	5.5
R187	5.5
R188	3
R189	2.5
R190	10
R191	9.5
R192	3
R193	3
R194	2.5
R195	3
R196	11
R197	13
R198	10.5
R199	5
R200	6
R201	13.5
R202	6
R203	8.5
R204	7.5
R205	5
R206	3.5
R207	9
R208	5
R209	4.5
R210	7.5
R211	11.5
R212	18
R213	12
R214	2.5
R215	15
R216	9
R217	10
R218	3.5
R219	5
R220	8
R221	6.5
R222	15
R223	6.5
R224	3
R225	4
R226	2
R227	4
R228	8
R229	7
R230	6.5
R231	1.5
R232	9
R233	6
R234	6.5
R235	11.5
R236	5
R237	3.5
R238	4
R239	4.5
R240	4.5

ground="cyanotype"

Example

The chart above, in each framework. Pick a framework once and every example on the site follows it.

shell

npm install @silverpoint/react @silverpoint/grounds @silverpoint/fonts

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { BeeswarmChart } from '@silverpoint/react/beeswarm-chart';

const data = [
  { reader: 'R001', device: 'desktop', minutes: 4 },
  { reader: 'R002', device: 'phone', minutes: 17 },
  { reader: 'R003', device: 'phone', minutes: 3 },
  { reader: 'R004', device: 'phone', minutes: 6.5 },
  { reader: 'R005', device: 'phone', minutes: 3.5 },
  { reader: 'R006', device: 'phone', minutes: 3 },
  { reader: 'R007', device: 'phone', minutes: 4.5 },
  { reader: 'R008', device: 'desktop', minutes: 23.5 },
  { reader: 'R009', device: 'phone', minutes: 1 },
  { reader: 'R010', device: 'desktop', minutes: 1 },
  { reader: 'R011', device: 'phone', minutes: 6.5 },
  { reader: 'R012', device: 'desktop', minutes: 4.5 },
  // … 228 more rows of the same shape
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <BeeswarmChart
        data={data}
        valueKey="minutes"
        labelKey="reader"
        title="Reading time per reader"
        unit="min"
      />
    </div>
  );
}

shell

npm install @silverpoint/vue @silverpoint/grounds @silverpoint/fonts

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SpBeeswarmChart } from '@silverpoint/vue/beeswarm-chart';

const data = [
  { reader: 'R001', device: 'desktop', minutes: 4 },
  { reader: 'R002', device: 'phone', minutes: 17 },
  { reader: 'R003', device: 'phone', minutes: 3 },
  { reader: 'R004', device: 'phone', minutes: 6.5 },
  { reader: 'R005', device: 'phone', minutes: 3.5 },
  { reader: 'R006', device: 'phone', minutes: 3 },
  { reader: 'R007', device: 'phone', minutes: 4.5 },
  { reader: 'R008', device: 'desktop', minutes: 23.5 },
  { reader: 'R009', device: 'phone', minutes: 1 },
  { reader: 'R010', device: 'desktop', minutes: 1 },
  { reader: 'R011', device: 'phone', minutes: 6.5 },
  { reader: 'R012', device: 'desktop', minutes: 4.5 },
  // … 228 more rows of the same shape
];
</script>

<template>
  <div style="width: 480px">
    <SpBeeswarmChart
      :data="data"
      value-key="minutes"
      label-key="reader"
      title="Reading time per reader"
      unit="min"
    />
  </div>
</template>

shell

npm install @silverpoint/angular @silverpoint/grounds @silverpoint/fonts

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';

import { Component } from '@angular/core';
import { SpBeeswarmChart } from '@silverpoint/angular/beeswarm-chart';

@Component({
  selector: 'app-root',
  imports: [SpBeeswarmChart],
  template: `
    <div style="width: 480px">
      <sp-beeswarm-chart
        [data]="data"
        valueKey="minutes"
        labelKey="reader"
        title="Reading time per reader"
        unit="min"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { reader: 'R001', device: 'desktop', minutes: 4 },
    { reader: 'R002', device: 'phone', minutes: 17 },
    { reader: 'R003', device: 'phone', minutes: 3 },
    { reader: 'R004', device: 'phone', minutes: 6.5 },
    { reader: 'R005', device: 'phone', minutes: 3.5 },
    { reader: 'R006', device: 'phone', minutes: 3 },
    { reader: 'R007', device: 'phone', minutes: 4.5 },
    { reader: 'R008', device: 'desktop', minutes: 23.5 },
    { reader: 'R009', device: 'phone', minutes: 1 },
    { reader: 'R010', device: 'desktop', minutes: 1 },
    { reader: 'R011', device: 'phone', minutes: 6.5 },
    { reader: 'R012', device: 'desktop', minutes: 4.5 },
    // … 228 more rows of the same shape
  ];
}

shell

pip install reflex-silverpoint-react

python

import reflex as rx
from reflex_silverpoint_react import beeswarm_chart

DATA = [
    {"reader": "R001", "device": "desktop", "minutes": 4},
    {"reader": "R002", "device": "phone", "minutes": 17},
    {"reader": "R003", "device": "phone", "minutes": 3},
    {"reader": "R004", "device": "phone", "minutes": 6.5},
    {"reader": "R005", "device": "phone", "minutes": 3.5},
    {"reader": "R006", "device": "phone", "minutes": 3},
    {"reader": "R007", "device": "phone", "minutes": 4.5},
    {"reader": "R008", "device": "desktop", "minutes": 23.5},
    {"reader": "R009", "device": "phone", "minutes": 1},
    {"reader": "R010", "device": "desktop", "minutes": 1},
    {"reader": "R011", "device": "phone", "minutes": 6.5},
    {"reader": "R012", "device": "desktop", "minutes": 4.5},
    # … 228 more rows of the same shape
]


def index() -> rx.Component:
    return rx.box(
        beeswarm_chart(
            data=DATA,
            value_key="minutes",
            label_key="reader",
            title="Reading time per reader",
            unit="min",
        ),
        width="480px",
    )


app = rx.App()
app.add_page(index)

Import

Each chart has its own subpath, so a bundle only carries the charts it uses. Every adapter also exports every chart from its barrel.

Framework	Import
React	`import { BeeswarmChart } from '@silverpoint/react/beeswarm-chart';`
Vue	`import { SpBeeswarmChart } from '@silverpoint/vue/beeswarm-chart';`
Angular	`import { SpBeeswarmChart } from '@silverpoint/angular/beeswarm-chart'; // <sp-beeswarm-chart>`
Reflex	`from reflex_silverpoint_react import beeswarm_chart`

Props

The props BeeswarmChart adds to the ones every chart takes. Accessor props (…Key, keys, names) name fields of your rows and are ignored without data.

React / Angular	Vue	Reflex	Type	Description
`valueKey`	`value-key`	`value_key`	`Accessor<number \| null \| undefined>`	—
`groupKey`	`group-key`	`group_key`	`Accessor<string \| null \| undefined>`	—
`labelKey`	`label-key`	`label_key`	`Accessor<string \| null \| undefined>`	Names the point in the readout and the table.
`radius`	`radius`	`radius`	`number`	Point radius in px; 3 by default.

Common props

Every chart also takes these. Framework conventions: camelCase in React and Angular, kebab-case in Vue templates, snake_case in Reflex. Read more about them.

Show the 22 common props

React / Angular	Vue	Reflex	Type	Description
`data`	`data`	`data`	`readonly Datum[]`	Rows to draw. If omitted, the demo dataset is rendered (REQ-093) and the accessor props (`…_key`, `keys`, `names`) are ignored.
`ground`	`ground`	`ground`	`GroundRef`	Style ground: `silverpoint` or `cyanotype`, or a ground object. Defaults to the app provider's, or `silverpoint`.
`substrate`	`substrate`	`substrate`	`SubstrateName`	Prepared substrate within the ground (REQ-046).
`mode`	`mode`	`mode`	`InkMode`	`ink` by default; `precision` disables inking (REQ-021).
`seed`	`seed`	`seed`	`Seed`	Seed. If omitted, it is derived from `id` stably (REQ-003).
`id`	`id`	`id`	`string`	Stable identifier. If omitted, it is generated deterministically.
`height`	`height`	`height`	`number`	Height of the drawing area in px. Width is the container's unless pinned.
`width`	`width`	`width`	`number`	—
`chrome`	`chrome`	`chrome`	`'card' \| 'bare'`	`card` draws the full frame; `bare` only the drawing area (REQ-095).
`hatchFill`	`hatch-fill`	`hatch_fill`	`'tile' \| 'per-shape'`	How areas are filled (REQ-029).
`title`	`title`	`title`	`string`	—
`badge`	`badge`	`badge`	`string`	—
`value`	`value`	`value`	`string \| number`	—
`unit`	`unit`	`unit`	`string`	—
`footerLeft`	`footer-left`	`footer_left`	`string`	—
`footerRight`	`footer-right`	`footer_right`	`string`	—
`label`	`label`	`label`	`string`	Accessible name. If omitted, it is derived from `title` (REQ-120).
`description`	`description`	`description`	`string`	Long description for screen readers (REQ-120).
`dataTable`	`data-table`	`data_table`	`'visible' \| 'hidden' \| 'none'`	Tabular alternative; `hidden` leaves it for assistive technology only (REQ-121).
`locale`	`locale`	`locale`	`string`	—
`numberFormat`	`number-format`	`number_format`	`Intl.NumberFormatOptions`	—
`className`	`class-name`	`class_name`	`string`	—

Pointer and keyboard exploration are built in. The item under the pointer or focus is reported, and a click, Enter or Space selects it. The item is { seriesKey, index, datum, value, point: { x, y } }.

Framework	Active item	Selection	Custom readout
React	`onActiveChange`	`onSelect`	`tooltip={(item, readout) => …}`
Vue	`@active-change`	`@select`	`<template #tooltip>`
Angular	`(activeChange)`	`(select)`	`<ng-template spTooltip>`
Reflex	`on_active_change`	`on_select`	`tooltip=tooltip_template(…)`

Interaction and readouts →

Report it

Found something wrong with BeeswarmChart? Open an issue on GitHub — the form comes pre-filled with the chart and the version.

BeeswarmChart

Example

Import

Props

Common props

Events