shadcn.io is an independent project built on shadcn/ui

Free

Dumbbell chart

Two values per category and the gap between them: before and after, budget against actual, two surveys. The tooltip adds the change as a difference and a percentage.

TanStack Charts

PreviewCode

Installation

The command adds the example above to components/charts/ and, the first time, the chart kit to components/ui/charts/. Both are source files in your project from then on: read them, change them, delete what you don't use.

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

Each row has a category under xDataKey (name by default) and two numbers, which <Dumbbell> reads through from and to. The value axis spans the values instead of starting at zero, so small gaps stay visible.

import {
  BarXAxis,
  BarYAxis,
  ChartTooltip,
  Dumbbell,
  DumbbellChart,
  Grid,
} from "@/components/ui/charts";

const data = [
  { name: "Onboarding", q1: 62, q2: 71 },
  { name: "Billing", q1: 48, q2: 57 },
  { name: "Search", q1: 70, q2: 68 },
  { name: "Reports", q1: 55, q2: 66 },
];

export const SatisfactionChart = () => (
  <DumbbellChart
    ariaLabel="Satisfaction by area, Q1 to Q2"
    data={data}
    margin={{ left: 96 }}
  >
    <Grid vertical />
    <Dumbbell from="q1" fromLabel="Q1" to="q2" toLabel="Q2" />
    <BarXAxis />
    <BarYAxis />
    <ChartTooltip />
  </DumbbellChart>
);

Anatomy

The chart is horizontal by default, with the categories down the left. <Dumbbell> draws both dots, the bar between them and the labels.

<DumbbellChart data={data} margin={{ left: 112 }} xDataKey="region">
  <Grid vertical />
  <Dumbbell from="before" fromLabel="Before" to="after" toLabel="After" />
  <BarXAxis />
  <BarYAxis />
  <ChartTooltip />
</DumbbellChart>

DumbbellChart: Gives each row a band, horizontal unless you set orientation="vertical".
Grid: Guide lines across the value axis: vertical on a horizontal chart.
Dumbbell: The from and to dots, the bar between them and, with showValues, a label past each end.
BarXAxis: The values on a horizontal chart, the categories on a vertical one.
BarYAxis: The categories on a horizontal chart, the values on a vertical one.
ChartTooltip: Both values and the change between them.

Legend and labels

Wrap the chart and a <ChartLegend> in <ChartLegendHoverProvider> and give both the same hovered index. The legend's first row stands for the from value and its second for the to value, and hovering a row dims the other value's dots and labels.

showValues labels both ends, each on its outer side so it never sits on the bar.

PreviewCode

Upright dumbbells

With orientation="vertical" the dumbbells stand up and the categories move to the bottom. Hovering an upright chart also brings in the crosshair, a dot on each value and the category label.

PreviewCode

Customization

The kit is in your project, in components/ui/charts/: your framework's components over a shared core/. Change a default there and every chart picks it up.

className goes on the chart's container, so size and spacing are utility classes.

fromColor and toColor color the dots, and barColor the bar, which is a faded toColor unless you set it. barSize and radius size the bar and the dots, both 6 px by default.

The tooltip adds a change line, the difference and the percentage. Pass showChange={false} when the change doesn't mean anything, for example between two unrelated segments.

<Dumbbell
  barSize={4}
  from="budget"
  fromColor="var(--chart-foreground-muted)"
  fromLabel="Budget"
  showValues
  to="actual"
  toColor="var(--chart-4)"
  toLabel="Actual"
/>

Where a part renders content of its own, you pass it in. In React:

ChartTooltip: content={({ point, index }) => …}

Loading state

Pass status="loading" and the rows become shimmering skeleton dumbbells that ignore the pointer. Switch to "ready" and each bar stretches from its first value to its second.

With no data yet, render <DumbbellChartLoading /> in the chart's place.

PreviewCode

Animation

Row by row, the from dot pops in, the bar stretches toward the to value and the second dot lands at the end. The whole entrance takes animationDuration (1100 ms), with value labels fading in last.

Pass animate={false} to draw the final state at once.

Theming

Every color in the kit is one of your theme's tokens or a mix of them, except --chart-positive, a fixed green. A preset or the .dark class restyles the chart, and overriding a token in your CSS changes it everywhere.

The from dots use --chart-foreground-muted and the to dots --chart-1, so the newer value stands out. Swap them with fromColor and toColor when the first value is the one that matters.

Token	Default	Paints
`--chart-1`	your theme's	the first series
`--chart-foreground-muted`	`--muted-foreground` mixed toward `--background`	skeletons and faded marks
`--chart-background`	`--card`	dot halos, the gaps between stacked marks
`--chart-grid`	`--border`	grid lines
`--chart-label`	`--muted-foreground`	tick labels
`--chart-tooltip-background`	`--popover`	the tooltip panel

globals.css

:root {
  --chart-background: var(--background);
  --chart-grid: var(--muted);
}

Accessibility

The chart is an image named by ariaLabel ("Dumbbell chart" by default). Say which two values it compares, such as "before and after the CDN move", and put the result in ariaDescription.

Tab: Moves focus to the chart and its first category.
Arrow Down: Moves to the next category. ArrowRight does the same.
Arrow Up: Moves to the previous category. ArrowLeft does the same.
Home: Jumps to the first category.
End: Jumps to the last category.

API reference

DumbbellChart

PropType

datareadonly Record<string, unknown>[]

The rows, one dumbbell each, in the order given.

Type: readonly Record<string, unknown>[]

xDataKey?string

The key of each row's category label.

Default: "name"

orientation?"vertical" | "horizontal"

"horizontal" runs each dumbbell left to right, the categories down the side; "vertical" stands them up.

Type: "vertical" | "horizontal"
Default: "horizontal"

aspectRatio?string | number

Aspect ratio of the chart, as "width / height" or a number.

Type: string | number
Default: "3 / 2"

margin?Partial<ChartMargin>

Space around the plot in px.

Type: Partial<ChartMargin>

animate?boolean

Animate the dumbbells in on mount: the first value appears, the bar stretches to the second, one row after another.

Default: true

animationDuration?number

Length of the entrance in milliseconds.

Default: 1100

ariaLabel?string

Accessible name of the chart.

Default: "Dumbbell chart"

ariaDescription?string

Longer accessible description of the chart.

className?string

Extra class name for the chart container.

style?CSSProperties

Inline styles for the chart container.

children?ReactNode

The chart's parts: Dumbbell, Grid, BarXAxis, BarYAxis and ChartTooltip.

status?ChartStatus

"loading" draws a shimmering skeleton shaped like the chart in place of its marks and ignores the pointer; switching to "ready" plays the chart's entrance.

Default: "ready"

loadingLabel?string

Centered label shown over the plot while status is "loading".

Dumbbell

PropType

fromstring

The key of each row's first value (the before).

tostring

The key of each row's second value (the after).

fromLabel?string

The first value's name in the tooltip and the legend. Defaults to from.

toLabel?string

The second value's name in the tooltip and the legend. Defaults to to.

fromColor?string

Colour of the first values' dots.

Default: "var(--chart-foreground-muted)"

toColor?string

Colour of the second values' dots.

Default: "var(--chart-1)"

barColor?string

Colour of the bar between the dots. Defaults to the second value's colour, faded.

barSize?number

Thickness of the bar between the dots in px.

Default: 6

radius?number

Radius of the dots in px.

Default: 6

showValues?boolean

Label both ends with their values.

showChange?boolean

Show the change from the first value to the second in the tooltip, as a difference and a percentage.

Default: true

formatValue?(value: number) => string

Formats a value in the labels and the tooltip. Defaults to a grouped integer.

Type: (value: number) => string

fadedOpacity?number

Opacity of the other rows while one is hovered.

Default: 0.3

Grid

PropType

horizontal?boolean

Show horizontal grid lines.

Default: true

vertical?boolean

Show vertical grid lines.

Default: false

numTicksRows?number

Number of horizontal grid lines. Ignored when rowTickValues is set.

Default: 5

numTicksColumns?number

Number of vertical grid lines.

Default: 10

rowTickValues?number[]

Explicit y values for the horizontal grid lines. Overrides numTicksRows.

stroke?string

Color of the grid lines.

Default: "var(--chart-grid)"

loadingStroke?string

Grid color while the chart is loading. Falls back to stroke.

strokeOpacity?number

Opacity of the grid lines.

Default: 1

strokeWidth?number

Width of the grid lines in px.

Default: 1

strokeDasharray?string

Dash pattern of the grid lines.

Default: "4,4"

highlightRowValues?number[]

Y values of horizontal lines drawn with the highlight styling, for example a zero baseline.

highlightRowStroke?string

Color of the highlighted rows.

Default: "var(--chart-foreground-muted)"

highlightRowStrokeOpacity?number

Opacity of the highlighted rows.

Default: 1

highlightRowStrokeWidth?number

Width of the highlighted rows in px.

Default: 1

highlightRowStrokeDasharray?string

Dash pattern of the highlighted rows.

Default: "0"

fadeHorizontal?boolean

Fade the horizontal lines toward transparent at the left and right edges.

Default: true

fadeVertical?boolean

Fade the vertical lines toward transparent at the top and bottom edges.

Default: false

hideHorizontalEdgeLines?boolean

Drop the first and last horizontal line (kept when two or fewer remain).

Default: false

hideVerticalEdgeLines?boolean

Drop the first and last vertical line (kept when two or fewer remain).

Default: false

shimmer?boolean

While the chart is loading, sweep a bright band across the grid.

Default: false

shimmerStroke?string

Color of the shimmer band.

Default: "color-mix(in oklch, var(--bkm-foreground) 68%, transparent)"

shimmerSpeed?number

Speed multiplier of the shimmer sweep. 2 is twice as fast.

Default: 1

BarXAxis

PropType

tickerHalfWidth?number

Half-width in px of the zone around the date pill inside which tick labels are hidden.

Default: 50

showAllLabels?boolean

Show every category label, even where they overlap, instead of thinning them to maxLabels and to the plot width.

Default: false

maxLabels?BarLabelCount

Maximum number of category labels when showAllLabels is off. Fewer are shown, evenly spaced, when that many would not fit the plot width. Pass { base, sm, md, lg, xl } to vary it with the chart's width (640, 768, 1024 and 1280 px and up).

Default: 12

BarYAxis

PropType

showAllLabels?boolean

Horizontal charts: show every category label instead of thinning to maxLabels.

Default: true

maxLabels?number

Horizontal charts: maximum number of category labels when showAllLabels is off.

Default: 20

numTicks?number

Vertical charts: target number of value ticks. Grid settings take precedence.

Default: 5

formatLargeNumbers?boolean

Vertical charts: abbreviate values of 1000 and above as thousands, for example 2k.

Default: true

formatValue?(value: number) => string

Vertical charts: formats a value tick into its label. Overrides formatLargeNumbers.

Type: (value: number) => string

ChartTooltip

PropType

showDatePill?boolean

Show the date pill that rides along the bottom of the plot.

Default: true

showCrosshair?boolean

Show the vertical crosshair line. Bar charts leave it off unless this is true (the dots and the category pill mark the bar).

Default: true

showDots?boolean

Show a dot on every series at the hovered position.

Default: true

dotVariant?"dot" | "ring"

Dot style: a filled "dot" or a transparent "ring" square. Read by BarChart only.

Type: "dot" | "ring"
Default: "dot"

dotSize?number

Dot radius in px.

Default: 5

dotRadiusFraction?number

Corner radius of the "ring" variant as a fraction of its side (0 is square, 0.5 is a circle). Read by BarChart only.

Default: 0.25

dotScale?number

Multiplier applied to the dot or ring size. Read by BarChart and LiveLineChart.

Default: 1

dotStrokeWidth?number

Stroke width of the dots in px.

Default: 2

indicatorColor?string | ((point: Record<string, unknown>) => string)

Color of the crosshair. Only a string is applied; the function form that bklit-ui accepts is ignored and the default is used.

Type: string | ((point: Record<string, unknown>) => string)
Default: "var(--chart-crosshair)"

content?(props: { point: Record<string, unknown>; index: number; pinned?: boolean; dismiss?: () => void }) => ReactNode

Replaces the default tooltip panel body. Receives the hovered data row and its index; with pinnable, also whether the panel is pinned and a dismiss that unpins it (for a close button in a pinned panel's detail).

Type: (props: { point: Record<string, unknown>; index: number; pinned?: boolean; dismiss?: () => void }) => ReactNode

pinnable?boolean

A click (or Enter, or Space) on the chart pins the tooltip where it is: the panel takes the pointer, so its content can grow into detail and hold controls, until another click, Escape or dismiss lets it go.

Default: false

rows?(point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]

Replaces the default rows (one per series) with your own list of { color, label, value }.

Type: (point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]

dotColor?string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)

Fill of the tooltip dots. A function receives the hovered row and the series config, and is called again each time the hovered row changes. Defaults to each series' color; a ProfitLossLine's dot takes the color of the hovered value's sign.

Type: string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)

children?ReactNode

Extra content rendered below the rows in the default panel, for example marker details. Without it, a chart with ChartMarkers lists the markers on the hovered date there.

className?string

Extra class name for the tooltip panel.

springConfig?SpringConfig

Spring for the floating panel when matchCrosshair is on. Defaults to the chart's tooltip spring.

matchCrosshair?boolean

Make the floating panel follow the pointer with the same spring as the crosshair instead of damping.

Default: false

damping?number

Spring damping for the floating panel when matchCrosshair is off, on bklit's 0 to 100 scale: lower is bouncier, higher slower, 0 moves the panel instantly. The default, 20, is the snappy hover spring (stiffness 3600, damping 120); every other value is bklit's spring for it played six times faster.

Default: 20

indicatorDasharray?string

Dash pattern of the crosshair. Omit for a solid line.

indicatorFadeEdges?IndicatorFadeEdges

Vertical fade of the crosshair: both ends, the top, the bottom, or none (solid).

Default: "both"

indicatorFadeLength?number

Size of the crosshair's fade, as a percentage of its height (2 to 40).

Default: 10

indicatorEndColor?string

Bottom colour of the crosshair: it ramps from indicatorColor at the top to this at the bottom (composes with the fade).

indicatorEnd?"plot" | "point"

How far down the crosshair reaches: the whole plot, or down to the hovered point of the first series.

Type: "plot" | "point"
Default: "plot"

dotHaloBlur?number

Blur in px on the dots' halo, for a soft glow.

Default: 0

topOffset?number

Extra gap in px between the top of the plot and the tooltip panel.

Default: 0

dateLabels?readonly string[]

The date pill's text for each data row, in row order (pair it with XAxis labels).

boxSpringConfig?SpringConfig

Spring for the floating panel. Takes priority over matchCrosshair and damping.

indicatorWidth?IndicatorWidth

Thickness of the crosshair: a width in px, or "line" (1px), "thin" (2px), "medium" (4px) or "thick" (8px).

Default: "line"

DumbbellChartLoading

PropType

margin?Partial<ChartMargin>

Space around the plot in px. Missing sides use the chart's default.

Type: Partial<ChartMargin>

aspectRatio?string | number

Aspect ratio of the placeholder, as "width / height" or a number.

Type: string | number
Default: the chart's

label?string

Text shown centered over the skeleton, with a shimmer. Nothing is shown when it is unset or empty.

loadingLabel?string

Deprecated: Use label, the name every chart's placeholder takes..

className?string

Extra class name for the chart container.

Examples

4 examples on React, each live with its code and its own install command.

All 4 dumbbell chart examples

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular Examples

Frameworks

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

Preview

Installation

Usage

Anatomy

Legend and labels

Upright dumbbells

Customization

Loading state

Animation

Theming

Accessibility

API reference

DumbbellChart

Dumbbell

Grid

BarXAxis

BarYAxis

ChartTooltip

DumbbellChartLoading

Examples