ScatterPlot

ScatterPlot shows the relationship between one x value and one y value for each observation. Use an optional label to identify points in the tooltip.

Release adoption

import { ScatterPlot } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const releasePoints = [
  { x: 1, y: 12, label: "Alpha web" },
  { x: 1, y: 18, label: "Alpha API" },
  { x: 1, y: 24, label: "Alpha mobile" },
  { x: 2, y: 16, label: "Beta web" },
  { x: 2, y: 29, label: "Beta API" },
  { x: 2, y: 34, label: "Beta mobile" },
  { x: 3, y: 22, label: "Gamma web" },
  { x: 3, y: 31, label: "Gamma API" },
  { x: 3, y: 41, label: "Gamma mobile" },
  { x: 4, y: 28, label: "Delta web" },
  { x: 4, y: 39, label: "Delta API" },
  { x: 4, y: 47, label: "Delta mobile" },
  { x: 5, y: 35, label: "Epsilon web" },
  { x: 5, y: 48, label: "Epsilon API" },
  { x: 5, y: 55, label: "Epsilon mobile" },
  { x: 6, y: 43, label: "Zeta web" },
  { x: 6, y: 53, label: "Zeta API" },
  { x: 6, y: 61, label: "Zeta mobile" },
  { x: 7, y: 52, label: "Eta web" },
  { x: 7, y: 62, label: "Eta API" },
  { x: 7, y: 69, label: "Eta mobile" },
  { x: 8, y: 58, label: "Theta web" },
  { x: 8, y: 68, label: "Theta API" },
  { x: 8, y: 76, label: "Theta mobile" },
  { x: 9, y: 66, label: "Iota web" },
  { x: 9, y: 74, label: "Iota API" },
  { x: 9, y: 82, label: "Iota mobile" },
  { x: 10, y: 73, label: "Kappa web" },
  { x: 10, y: 81, label: "Kappa API" },
  { x: 10, y: 88, label: "Kappa mobile" },
];

export default function ScatterPlotExample() {
  return (
    <ExampleStack style={{ minHeight: "18rem", width: "100%" }}>
      <ScatterPlot
        aria-label="Release adoption by week"
        color="chart-1"
        data={releasePoints}
        height={288}
        style={{ flex: 1 }}
        title="Release adoption"
      />
    </ExampleStack>
  );
}

Props

Prop	Values	Default
`data`	`{ x: number \| string \| Date, y: number, label?: string }[]`	None
`aria-label`	string	None
`spark`	`true`, `false`	`false`
`color`	`chart-1` through `chart-6`, `positive`, `negative`, `neutral`	`chart-1`
`emphasis`	`primary`, `secondary`, `outline`, `ghost`	`secondary`
`size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`sm`
`title`	string	None
`height`	number	Responsive default

data and aria-label are required. ScatterPlot infers its x scale from the supplied values and formats tooltips with the active locale. size controls the title and axis-label size, while emphasis controls their color.

Color

import { ScatterPlot } from "density-base-ui";
const data = [
  { x: 1, y: 2 },
  { x: 2, y: 4 },
];
export default function ScatterPlotColorExample() {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <ScatterPlot aria-label="Chart 1" color="chart-1" data={data} spark />
      <ScatterPlot aria-label="Chart 2" color="chart-2" data={data} spark />
      <ScatterPlot aria-label="Chart 3" color="chart-3" data={data} spark />
      <ScatterPlot aria-label="Chart 4" color="chart-4" data={data} spark />
      <ScatterPlot aria-label="Chart 5" color="chart-5" data={data} spark />
      <ScatterPlot aria-label="Chart 6" color="chart-6" data={data} spark />
      <ScatterPlot aria-label="Positive" color="positive" data={data} spark />
      <ScatterPlot aria-label="Negative" color="negative" data={data} spark />
      <ScatterPlot aria-label="Neutral" color="neutral" data={data} spark />
    </div>
  );
}

Emphasis

Primary

Secondary

Outline

Ghost

import { ScatterPlot } from "density-base-ui";
const data = [
  { x: 1, y: 2 },
  { x: 2, y: 4 },
];
export default function ScatterPlotEmphasisExample() {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <ScatterPlot
        aria-label="Primary"
        emphasis="primary"
        data={data}
        title="Primary"
      />
      <ScatterPlot
        aria-label="Secondary"
        emphasis="secondary"
        data={data}
        title="Secondary"
      />
      <ScatterPlot
        aria-label="Outline"
        emphasis="outline"
        data={data}
        title="Outline"
      />
      <ScatterPlot
        aria-label="Ghost"
        emphasis="ghost"
        data={data}
        title="Ghost"
      />
    </div>
  );
}

Size

2xs

2xl

3xl

import { ScatterPlot } from "density-base-ui";
const data = [
  { x: 1, y: 2 },
  { x: 2, y: 4 },
];
export default function ScatterPlotSizeExample() {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <ScatterPlot aria-label="2xs" size="2xs" data={data} title="2xs" />
      <ScatterPlot aria-label="xs" size="xs" data={data} title="xs" />
      <ScatterPlot aria-label="sm" size="sm" data={data} title="sm" />
      <ScatterPlot aria-label="md" size="md" data={data} title="md" />
      <ScatterPlot aria-label="lg" size="lg" data={data} title="lg" />
      <ScatterPlot aria-label="xl" size="xl" data={data} title="xl" />
      <ScatterPlot aria-label="2xl" size="2xl" data={data} title="2xl" />
      <ScatterPlot aria-label="3xl" size="3xl" data={data} title="3xl" />
    </div>
  );
}

Title

Latency and throughput

import { ScatterPlot } from "density-base-ui";
export default function ScatterPlotTitleExample() {
  return (
    <ScatterPlot
      aria-label="Latency and throughput"
      data={[
        { x: 1, y: 2 },
        { x: 2, y: 4 },
      ]}
      title="Latency and throughput"
    />
  );
}

Height

import { ScatterPlot } from "density-base-ui";
export default function ScatterPlotHeightExample() {
  return (
    <ScatterPlot
      aria-label="Compact chart"
      data={[
        { x: 1, y: 2 },
        { x: 2, y: 4 },
      ]}
      height={120}
    />
  );
}

Spark

Set spark for a compact 32px chart without axes, gridlines, or visible labels. Spark charts still expose their data through keyboard-accessible tooltips.

import { ScatterPlot } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const releaseRisk = [
  { x: 1, y: 18, label: "Core" },
  { x: 2, y: 28, label: "Billing" },
  { x: 3, y: 24, label: "Search" },
  { x: 4, y: 39, label: "Projects" },
  { x: 5, y: 34, label: "Settings" },
  { x: 6, y: 48, label: "Insights" },
];

export default function ScatterPlotSparkExample() {
  return (
    <ExampleStack style={{ width: "100%" }}>
      <ScatterPlot
        aria-label="Release risk by area"
        color="chart-1"
        data={releaseRisk}
        spark
        style={{ width: "160px" }}
      />
    </ExampleStack>
  );
}