Charts · Distributions & comparisons

DumbbellChart

Two values per category joined by a segment. Family: Distributions & comparisons · chart 41 of 60.

Patients seen, 2024 and 2025
clinic	2024	2025	change
Ashford	59	66	+7
Brook Lane	24	30	+6
Castlegate	33	47	+14
Dunmore	23	16	−7
Eastwick	52	60	+8
Fairholm	28	43	+15
Glenbrook	32	40	+8
Hollins	33	25	−8
Ivybridge	25	31	+6
Juniper Row	25	32	+7

Report an issue with this chart

Patients seen, 2024 and 2025
clinic	2024	2025	change
Ashford	59	66	+7
Brook Lane	24	30	+6
Castlegate	33	47	+14
Dunmore	23	16	−7
Eastwick	52	60	+8
Fairholm	28	43	+15
Glenbrook	32	40	+8
Hollins	33	25	−8
Ivybridge	25	31	+6
Juniper Row	25	32	+7

mode="precision"

Patients seen, 2024 and 2025
clinic	2024	2025	change
Ashford	59	66	+7
Brook Lane	24	30	+6
Castlegate	33	47	+14
Dunmore	23	16	−7
Eastwick	52	60	+8
Fairholm	28	43	+15
Glenbrook	32	40	+8
Hollins	33	25	−8
Ivybridge	25	31	+6
Juniper Row	25	32	+7

substrate="green"

Patients seen, 2024 and 2025
clinic	2024	2025	change
Ashford	59	66	+7
Brook Lane	24	30	+6
Castlegate	33	47	+14
Dunmore	23	16	−7
Eastwick	52	60	+8
Fairholm	28	43	+15
Glenbrook	32	40	+8
Hollins	33	25	−8
Ivybridge	25	31	+6
Juniper Row	25	32	+7

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 { DumbbellChart } from '@silverpoint/react/dumbbell-chart';

const data = [
  { clinic: 'Ashford', y2024: 59, y2025: 66 },
  { clinic: 'Brook Lane', y2024: 24, y2025: 30 },
  { clinic: 'Castlegate', y2024: 33, y2025: 47 },
  { clinic: 'Dunmore', y2024: 23, y2025: 16 },
  { clinic: 'Eastwick', y2024: 52, y2025: 60 },
  { clinic: 'Fairholm', y2024: 28, y2025: 43 },
  { clinic: 'Glenbrook', y2024: 32, y2025: 40 },
  { clinic: 'Hollins', y2024: 33, y2025: 25 },
  { clinic: 'Ivybridge', y2024: 25, y2025: 31 },
  { clinic: 'Juniper Row', y2024: 25, y2025: 32 },
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <DumbbellChart
        data={data}
        labelKey="clinic"
        startKey="y2024"
        endKey="y2025"
        names={['2024', '2025']}
        title="Patients seen, 2024 and 2025"
      />
    </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 { SpDumbbellChart } from '@silverpoint/vue/dumbbell-chart';

const data = [
  { clinic: 'Ashford', y2024: 59, y2025: 66 },
  { clinic: 'Brook Lane', y2024: 24, y2025: 30 },
  { clinic: 'Castlegate', y2024: 33, y2025: 47 },
  { clinic: 'Dunmore', y2024: 23, y2025: 16 },
  { clinic: 'Eastwick', y2024: 52, y2025: 60 },
  { clinic: 'Fairholm', y2024: 28, y2025: 43 },
  { clinic: 'Glenbrook', y2024: 32, y2025: 40 },
  { clinic: 'Hollins', y2024: 33, y2025: 25 },
  { clinic: 'Ivybridge', y2024: 25, y2025: 31 },
  { clinic: 'Juniper Row', y2024: 25, y2025: 32 },
];
</script>

<template>
  <div style="width: 480px">
    <SpDumbbellChart
      :data="data"
      label-key="clinic"
      start-key="y2024"
      end-key="y2025"
      :names="['2024', '2025']"
      title="Patients seen, 2024 and 2025"
    />
  </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 { SpDumbbellChart } from '@silverpoint/angular/dumbbell-chart';

@Component({
  selector: 'app-root',
  imports: [SpDumbbellChart],
  template: `
    <div style="width: 480px">
      <sp-dumbbell-chart
        [data]="data"
        labelKey="clinic"
        startKey="y2024"
        endKey="y2025"
        [names]="['2024', '2025']"
        title="Patients seen, 2024 and 2025"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { clinic: 'Ashford', y2024: 59, y2025: 66 },
    { clinic: 'Brook Lane', y2024: 24, y2025: 30 },
    { clinic: 'Castlegate', y2024: 33, y2025: 47 },
    { clinic: 'Dunmore', y2024: 23, y2025: 16 },
    { clinic: 'Eastwick', y2024: 52, y2025: 60 },
    { clinic: 'Fairholm', y2024: 28, y2025: 43 },
    { clinic: 'Glenbrook', y2024: 32, y2025: 40 },
    { clinic: 'Hollins', y2024: 33, y2025: 25 },
    { clinic: 'Ivybridge', y2024: 25, y2025: 31 },
    { clinic: 'Juniper Row', y2024: 25, y2025: 32 },
  ];
}

shell

pip install reflex-silverpoint-react

python

import reflex as rx
from reflex_silverpoint_react import dumbbell_chart

DATA = [
    {"clinic": "Ashford", "y2024": 59, "y2025": 66},
    {"clinic": "Brook Lane", "y2024": 24, "y2025": 30},
    {"clinic": "Castlegate", "y2024": 33, "y2025": 47},
    {"clinic": "Dunmore", "y2024": 23, "y2025": 16},
    {"clinic": "Eastwick", "y2024": 52, "y2025": 60},
    {"clinic": "Fairholm", "y2024": 28, "y2025": 43},
    {"clinic": "Glenbrook", "y2024": 32, "y2025": 40},
    {"clinic": "Hollins", "y2024": 33, "y2025": 25},
    {"clinic": "Ivybridge", "y2024": 25, "y2025": 31},
    {"clinic": "Juniper Row", "y2024": 25, "y2025": 32},
]


def index() -> rx.Component:
    return rx.box(
        dumbbell_chart(
            data=DATA,
            label_key="clinic",
            start_key="y2024",
            end_key="y2025",
            names=["2024", "2025"],
            title="Patients seen, 2024 and 2025",
        ),
        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 { DumbbellChart } from '@silverpoint/react/dumbbell-chart';`
Vue	`import { SpDumbbellChart } from '@silverpoint/vue/dumbbell-chart';`
Angular	`import { SpDumbbellChart } from '@silverpoint/angular/dumbbell-chart'; // <sp-dumbbell-chart>`
Reflex	`from reflex_silverpoint_react import dumbbell_chart`

Props

The props DumbbellChart 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
`labelKey`	`label-key`	`label_key`	`Accessor<string>`	—
`startKey`	`start-key`	`start_key`	`Accessor<number \| null \| undefined>`	—
`endKey`	`end-key`	`end_key`	`Accessor<number \| null \| undefined>`	—
`names`	`names`	`names`	`readonly [string, string]`	Titles of the two values; `['start', 'end']` by default.
`endMarker`	`end-marker`	`end_marker`	`'dot' \| 'arrow'`	`arrow` encodes the direction from the first value to the second.
`orientation`	`orientation`	`orientation`	`ChartOrientation`	`rows` by default: long category names read across.

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 DumbbellChart? Open an issue on GitHub — the form comes pre-filled with the chart and the version.

DumbbellChart

Example

Import

Props

Common props

Events