ScatterChart

Two measures on two value axes, points optionally grouped, with hyperbolas of constant x·y drawn behind them - the iso-lines that turn a cloud into a statement about a meaningful product (e.g. equal gross profit).

When to use

Correlation between two measures - margin vs revenue, price vs volume. Iso-lines reveal a meaningful product (x·y).

Example

import { ScatterChart } from "ibcs-react";

<ScatterChart
  data={[{ x: 120, y: 18, group: "Enterprise", label: "Acme" } /* …thousands… */]}
  xLabel="Revenue"
  yLabel="Gross profit"
  isoLines={[1000, 2000, 3000]} // equal x·y hyperbolas
/>;

The chart handles anything from a handful of points to thousands - dense data is down-sampled automatically. Label only the points that carry the message; unlabelled points still read as the cloud they belong to.

Props