# DumbbellChart

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

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `items` | `readonly DumbbellChartItem[]` | `Required` |
| `domain` | `readonly [number, number]` | `—` |
| `beforeLabel` | `string` | `—` |
| `afterLabel` | `string` | `—` |
| `missingLabel` | `string` | `—` |
| `emptyLabel` | `string` | `—` |
| `formatValue` | `(value: number) => string` | `—` |
| `navigationLabel` | `string` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "role" \| "aria-label">` | `Forwarded` |