DumbbellChart

Use DumbbellChart

Paired values on one scale for comparing before and after across groups.

"use client";

import { FloodRoot, DumbbellChart } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <DumbbellChart label="Response time before and after" items={[
        {id:"api", label:"API", before:242, after:164},
        {id:"billing", label:"Billing", before:153, after:190}
      ]} formatValue={(value) => `${value} ms`} />
    </FloodRoot>
  );
}

Design notes

• The hollow point marks Before and the filled point marks After. Equal values share a position. A null endpoint leaves the other point visible.
• Compare the same measure in the same units. Supply a shared domain when comparing separate charts and use formatValue to include units.
• Hover, tap or use the arrow keys to read both values. Rename beforeLabel and afterLabel when comparing other paired conditions.

API reference