Skip to content

Components

ScatterChart

Response time by traffic

Use arrow keys to inspect points, or Home and End to jump.

Component reference

Properties

Use ScatterChart

Paired numeric observations for inspecting how two measures vary together.

Example import style
scatter-chart.tsxTSX
"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

PropValuesDefault
labelstringRequired
xLabelstringRequired
yLabelstringRequired
pointsreadonly ScatterChartPoint[]Required
xDomainreadonly [number, number]—
yDomainreadonly [number, number]—
formatX(value: number) => string—
formatY(value: number) => string—
emptyLabelstring—
navigationLabelstring—
Native HTML propsOmit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label">Forwarded
View TypeScript source