# ScatterChart

Paired numeric observations for inspecting how two measures vary together.

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, ScatterChart } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ScatterChart label="Response time by traffic" xLabel="Requests / sec" yLabel="Response time (ms)" points={[
        {id:"run-1", label:"Run 1", x:12, y:110},
        {id:"run-2", label:"Run 2", x:52, y:162},
        {id:"run-3", label:"Run 3", x:104, y:301}
      ]} />
    </FloodRoot>
  );
}
```

## Design notes

- Give each point a stable ID and finite x and y values. Label both axes with their units.
- Use matching xDomain and yDomain to compare separate plots. Use formatX and formatY for localized values.
- Inspect the nearest point with the pointer or traverse observations in supplied order with the keyboard.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `xLabel` | `string` | `Required` |
| `yLabel` | `string` | `Required` |
| `points` | `readonly ScatterChartPoint[]` | `Required` |
| `xDomain` | `readonly [number, number]` | `—` |
| `yDomain` | `readonly [number, number]` | `—` |
| `formatX` | `(value: number) => string` | `—` |
| `formatY` | `(value: number) => string` | `—` |
| `emptyLabel` | `string` | `—` |
| `navigationLabel` | `string` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "role" \| "aria-label">` | `Forwarded` |