Density

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.

Exoplanet transit
import { ScatterPlot, View } from "density-base-ui";
import { exoplanetTransitObservations } from "../charts/scientificChartData";

export default function ScatterPlotExample() {
  return (
    <View align="start" gap="md" padding={false} style={{ minHeight: "18rem" }}>
      <ScatterPlot
        aria-label="Exoplanet transit brightness observations"
        color="chart-1"
        data={exoplanetTransitObservations}
        height={288}
        style={{ flex: 1 }}
        title="Exoplanet transit"
        yDomain="data"
      />
    </View>
  );
}

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 size; axis labels render one Density size step smaller. emphasis controls their color.

Color

import { ScatterPlot } from "density-base-ui";
import { releaseRisk as data } from "../charts/chartExampleData";
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";
import { releaseRisk as data } from "../charts/chartExampleData";
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"
        yDomain="data"
      />
      <ScatterPlot
        aria-label="Secondary"
        emphasis="secondary"
        data={data}
        title="Secondary"
        yDomain="data"
      />
      <ScatterPlot
        aria-label="Outline"
        emphasis="outline"
        data={data}
        title="Outline"
        yDomain="data"
      />
      <ScatterPlot
        aria-label="Ghost"
        emphasis="ghost-primary"
        data={data}
        title="Ghost"
        yDomain="data"
      />
    </div>
  );
}

Size

2xs
xs
sm
md
lg
xl
2xl
3xl
import { ScatterPlot } from "density-base-ui";
import { releaseRisk as data } from "../charts/chartExampleData";
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"
        yDomain="data"
      />
      <ScatterPlot
        aria-label="xs"
        size="xs"
        data={data}
        title="xs"
        yDomain="data"
      />
      <ScatterPlot
        aria-label="sm"
        size="sm"
        data={data}
        title="sm"
        yDomain="data"
      />
      <ScatterPlot
        aria-label="md"
        size="md"
        data={data}
        title="md"
        yDomain="data"
      />
      <ScatterPlot
        aria-label="lg"
        size="lg"
        data={data}
        title="lg"
        yDomain="data"
      />
      <ScatterPlot
        aria-label="xl"
        size="xl"
        data={data}
        title="xl"
        yDomain="data"
      />
      <ScatterPlot
        aria-label="2xl"
        size="2xl"
        data={data}
        title="2xl"
        yDomain="data"
      />
      <ScatterPlot
        aria-label="3xl"
        size="3xl"
        data={data}
        title="3xl"
        yDomain="data"
      />
    </div>
  );
}

Title

Latency and throughput
Requests from the previous seven days
import { ScatterPlot } from "density-base-ui";
import { releaseRisk } from "../charts/chartExampleData";
export default function ScatterPlotTitleExample() {
  return (
    <ScatterPlot
      aria-label="Latency and throughput"
      data={releaseRisk}
      title="Latency and throughput"
      subtitle="Requests from the previous seven days"
      yDomain="data"
    />
  );
}

Height

import { ScatterPlot } from "density-base-ui";
import { releaseRisk } from "../charts/chartExampleData";
export default function ScatterPlotHeightExample() {
  return (
    <ScatterPlot
      aria-label="Compact chart"
      data={releaseRisk}
      height={120}
      yDomain="data"
    />
  );
}

Padding

import { ScatterPlot } from "density-base-ui";
import { releaseRisk } from "../charts/chartExampleData";

export default function ScatterPlotPaddingExample() {
  return (
    <ScatterPlot
      aria-label="Release risk by team with padding"
      data={releaseRisk}
      padding
      yDomain="data"
    />
  );
}

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, View } from "density-base-ui";
import { releaseRisk } from "../charts/chartExampleData";

export default function ScatterPlotSparkExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ScatterPlot
        aria-label="Release risk by area"
        color="chart-1"
        data={releaseRisk}
        spark
        style={{ width: "160px" }}
      />
    </View>
  );
}