Scatter and Bubble Chart · Kind UI charts

Loading chart…

Task latency and acceptance by cohort
Task	Cohort	Latency (ms)	Acceptance (%)
Search (weekday)	weekday	28	84
Draft (weekday)	weekday	52	92
Summarize (weekday)	weekday	41	89
Translate (weekday)	weekday	65	95
Search (weekend)	weekend	35	80
Draft (weekend)	weekend	61	88
Summarize (weekend)	weekend	47	86
Translate (weekend)	weekend	76	93

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import { useState } from "react";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Search (weekday)", cohort: "weekday", latency: 28, acceptance: 84 },
  { period: "Draft (weekday)", cohort: "weekday", latency: 52, acceptance: 92 },
  { period: "Summarize (weekday)", cohort: "weekday", latency: 41, acceptance: 89 },
  { period: "Translate (weekday)", cohort: "weekday", latency: 65, acceptance: 95 },
  { period: "Search (weekend)", cohort: "weekend", latency: 35, acceptance: 80 },
  { period: "Draft (weekend)", cohort: "weekend", latency: 61, acceptance: 88 },
  { period: "Summarize (weekend)", cohort: "weekend", latency: 47, acceptance: 86 },
  { period: "Translate (weekend)", cohort: "weekend", latency: 76, acceptance: 93 },
];
const weekdayShape = "circle";
const weekendShape = "diamond";
const config = {
  weekday: { label: "Weekday", color: "#733bff", legendShape: weekdayShape },
  weekend: { label: "Weekend", color: "#07948b", legendShape: weekendShape },
} satisfies Chart.SeriesConfig;

export function TaskScatterChart() {
  const [visibleSeries, setVisibleSeries] = useState<string[]>(["weekday", "weekend"]);
  return (
    <Chart.Root
      config={config}
      visibleSeries={visibleSeries}
      onVisibleSeriesChange={setVisibleSeries}
    >
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.ScatterChart
          animate
          accessibilityLayer
          margin={{ top: 20, right: 24, bottom: 8, left: 0 }}
          aria-label="Task latency in milliseconds and acceptance percentage by cohort"
        >
          <Chart.CartesianGrid strokeDasharray="3 3" />
          <Chart.XAxis
            type="number"
            dataKey="latency"
            name="Latency (ms)"
            domain={[0, 100]}
            ticks={[0, 50, 100]}
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            height={64}
            interval="preserveStartEnd"
            minTickGap={48}
            label={{ value: "ms", position: "insideBottom", offset: 0 }}
          />
          <Chart.YAxis
            type="number"
            dataKey="acceptance"
            name="Acceptance"
            unit="%"
            domain={[70, 100]}
            ticks={[70, 80, 90, 100]}
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            width={104}
          />
          <Chart.ScatterSeries
            seriesKey="weekday"
            name="Weekday"
            data={data.filter((row) => row.cohort === "weekday")}
            shape={weekdayShape}
          />
          <Chart.ScatterSeries
            seriesKey="weekend"
            name="Weekend"
            data={data.filter((row) => row.cohort === "weekend")}
            shape={weekendShape}
          />
          <Chart.ScatterTooltip<(typeof data)[number]> pointLabel={(row) => row.period} />
        </Chart.ScatterChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Usage

Supply records to each ScatterSeries and numeric keys to the X and Y axes.

Composition

<Chart.Root config={config} visibleSeries={visibleSeries} onVisibleSeriesChange={setVisibleSeries}>
  <Chart.Legend />
  <Chart.ResponsiveContainer width="100%" height={280}>
    <Chart.ScatterChart animate accessibilityLayer aria-label="Latency and acceptance by cohort">
      <Chart.CartesianGrid />
      <Chart.XAxis type="number" dataKey="latency" name="Latency" unit=" ms" />
      <Chart.YAxis type="number" dataKey="acceptance" name="Acceptance" unit="%" />
      <Chart.ScatterSeries seriesKey="weekday" data={data.filter((row) => row.cohort === "weekday")} shape="circle" />
      <Chart.ScatterSeries seriesKey="weekend" data={data.filter((row) => row.cohort === "weekend")} shape="diamond" />
      <Chart.ScatterTooltip<(typeof data)[number]> pointLabel={(row) => row.period} />
    </Chart.ScatterChart>
  </Chart.ResponsiveContainer>
</Chart.Root>

Series keys identify legend entries; X/Y keys identify dimensions. Reuse each symbol in legendShape and series shape; legend toggles use consumer-owned visibility.

Bubble size

Add ZAxis to compose bubbles; there is no BubbleChart export. Its domain and range map request volume to symbol area.

Loading chart…

Task latency, acceptance and request volume
Task	Latency (ms)	Acceptance (%)	Requests (k; blank means missing)
Search	28	84	260
Draft	52	92	180
Summarize	41	89	120
Translate	65	95	75
Classify	19	81	0
Extract	73	88

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Search", latency: 28, acceptance: 84, requests: 260 },
  { period: "Draft", latency: 52, acceptance: 92, requests: 180 },
  { period: "Summarize", latency: 41, acceptance: 89, requests: 120 },
  { period: "Translate", latency: 65, acceptance: 95, requests: 75 },
  { period: "Classify", latency: 19, acceptance: 81, requests: 0 },
  { period: "Extract", latency: 73, acceptance: 88, requests: null },
];
const config = {
  tasks: { label: "Tasks", color: "#733bff", legendShape: "circle" },
} satisfies Chart.SeriesConfig;

export function TaskBubbleChart() {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.ScatterChart
          animate
          accessibilityLayer
          margin={{ top: 20, right: 24, bottom: 8, left: 0 }}
          aria-label="Task latency in milliseconds, acceptance percentage and request volume in thousands"
        >
          <Chart.CartesianGrid strokeDasharray="3 3" />
          <Chart.XAxis
            type="number"
            dataKey="latency"
            name="Latency (ms)"
            domain={[0, 100]}
            ticks={[0, 50, 100]}
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            height={64}
            interval="preserveStartEnd"
            minTickGap={48}
            label={{ value: "ms", position: "insideBottom", offset: 0 }}
          />
          <Chart.YAxis
            type="number"
            dataKey="acceptance"
            name="Acceptance"
            unit="%"
            domain={[70, 100]}
            ticks={[70, 80, 90, 100]}
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            width={104}
          />
          <Chart.ZAxis
            dataKey="requests"
            name="Requests"
            unit="k"
            domain={[0, 300]}
            range={[48, 1000]}
          />
          <Chart.ScatterSeries seriesKey="tasks" data={data} shape="circle" fillOpacity={0.72} />
          <Chart.ScatterTooltip<(typeof data)[number]>
            pointLabel={(row) => row.period}
            zDimension={{ dataKey: "requests", name: "Requests", unit: "k" }}
          />
        </Chart.ScatterChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Native Z scaling uses the minimum area for zero and missing values. zDimension restores their raw tooltip values without changing geometry.

Use top-level keys or a shared accessor for nested Z values. Validate negative count inputs before scaling; Kind retains native size behavior.

Materials

Choose plain, paper, clay or glow.

Loading chart…

Task latency, acceptance and request volume
Task	Latency (ms)	Acceptance (%)	Requests (k; blank means missing)
Search	28	84	260
Draft	52	92	180
Summarize	41	89	120
Translate	65	95	75
Classify	19	81	0
Extract	73	88

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Search", latency: 28, acceptance: 84, requests: 260 },
  { period: "Draft", latency: 52, acceptance: 92, requests: 180 },
  { period: "Summarize", latency: 41, acceptance: 89, requests: 120 },
  { period: "Translate", latency: 65, acceptance: 95, requests: 75 },
  { period: "Classify", latency: 19, acceptance: 81, requests: 0 },
  { period: "Extract", latency: 73, acceptance: 88, requests: null },
];
const config = {
  tasks: { label: "Tasks", color: "#733bff", legendShape: "circle" },
} satisfies Chart.SeriesConfig;

export function MaterialBubbleChart({ material = "paper" }: { material?: Chart.ScatterMaterial }) {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.ScatterChart
          animate
          accessibilityLayer
          margin={{ top: 20, right: 24, bottom: 8, left: 0 }}
          aria-label="Task latency in milliseconds, acceptance percentage and request volume in thousands"
        >
          <Chart.CartesianGrid strokeDasharray="3 3" />
          <Chart.XAxis
            type="number"
            dataKey="latency"
            name="Latency (ms)"
            domain={[0, 100]}
            ticks={[0, 50, 100]}
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            height={64}
            interval="preserveStartEnd"
            minTickGap={48}
            label={{ value: "ms", position: "insideBottom", offset: 0 }}
          />
          <Chart.YAxis
            type="number"
            dataKey="acceptance"
            name="Acceptance"
            unit="%"
            domain={[70, 100]}
            ticks={[70, 80, 90, 100]}
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            width={104}
          />
          <Chart.ZAxis
            dataKey="requests"
            name="Requests"
            unit="k"
            domain={[0, 300]}
            range={[48, 1000]}
          />
          <Chart.ScatterSeries
            seriesKey="tasks"
            data={data}
            shape="circle"
            material={material}
            fillOpacity={0.72}
          />
          <Chart.ScatterTooltip<(typeof data)[number]>
            pointLabel={(row) => row.period}
            zDimension={{ dataKey: "requests", name: "Requests", unit: "k" }}
          />
        </Chart.ScatterChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Finishes preserve symbol paths and Z area; glow is decorative. Custom shapes, point filters or clip paths bypass the finish. Small marks may make finishes indistinguishable.

Interaction and accessibility

Pointer inspection selects visible point records. Left/Right visits the first registered series in data order, not spatial order or every series. Escape dismisses inspection.

Motion fades marks in place. Interaction or data/visibility/geometry changes finish entrance; reduced motion disables it. Remount to replay.

API reference

Focused props for explicit numeric composition; Recharts owns scales, symbols and point selection.

ScatterChart

Prop	Type	Default	Description
`animate`	`boolean \| ScatterAnimation`	`false`	In-place entrance fade and shared tooltip motion; respects reduced motion.
`accessibilityLayer`	`boolean`	`true` in Recharts	Native first-series keyboard inspection; set explicitly here.
`margin`	`{ top?: number; right?: number; bottom?: number; left?: number }`	`5` each	Plot spacing for axes and marks.
`children`	`ReactNode`	—	Explicit axes, grid, series and Scatter tooltip.
`aria-label` / `aria-labelledby`	`string`	—	Accessible plot name.

No configured Line shortcuts. See Recharts ScatterChart.

At the pinned peer version, fixed-size server rendering produces no Scatter SVG marks. Supply server-rendered data or a summary.

ScatterSeries

Prop	Type	Default	Description
`data`	`Row[]`	—	Native point records; axis keys read these records.
`seriesKey`	`string`	String `dataKey`	Config and visibility identity; use explicitly for cohorts.
`shape`	`"circle" \| "cross" \| "diamond" \| "square" \| "star" \| "triangle" \| "wye"` or native custom shape	`"circle"`	Built-in symbol or consumer-owned renderer.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Finish for built-in symbols, preserving native geometry.
`fill`	`string`	Config color when identified	Explicit color overrides metadata.
`hide`	`boolean`	`false`	Native hiding; Root selection also applies.
`xAxisId` / `yAxisId` / `zAxisId`	`string \| number`	`0`	Native axis association.

Native per-series animation is disabled. Kind does not coerce or deduplicate coordinates; Cells, labels, events and custom shapes remain available. See Recharts Scatter.

ScatterTooltip

Prop	Type	Default	Description
`pointLabel`	`(record: Row) => ReactNode`	Config series label	Receives the actual selected native record.
`zDimension`	`ScatterSizeDimension<Row>`	—	Explicit raw zero/missing size recovery; no geometry change.
`missingValue`	`ReactNode`	`"No data"`	Text for a recovered missing measurement.
`axisId`	`string \| number`	`0`	Match a custom X axis ID for native keyboard navigation.
`maxWidth`	`number`	`180`	Kind tooltip width bound in pixels.
`content`	`ReactElement \| ((props: TooltipRenderProps) => ReactNode)`	Kind Scatter content	Custom content owns dimension rendering.

zDimension accepts a string key or numeric/missing-value accessor, plus optional name and unit. Native formatters take precedence. See Recharts Tooltip.

Preserve accessible data for every series, including overlapping observations and missing measurements.

ScatterTooltipContent

Prop	Type	Default	Description
`tooltip`	`TooltipRenderProps`	Required	Native tooltip content callback payload.
`pointLabel` / `zDimension` / `missingValue`	Same as `ScatterTooltip`	Same	Compose Kind dimension content inside a custom native adapter.
`valueAnimation`	`"shuffle"`	—	Optional numeric readout motion.

Shared components

Root, SeriesConfig, Axes and grid, Legend, ResponsiveContainer.

UsageCopy Anchor Link

Bubble sizeCopy Anchor Link

MaterialsCopy Anchor Link

Interaction and accessibilityCopy Anchor Link

API referenceCopy Anchor Link

ScatterChartCopy Anchor Link

ScatterSeriesCopy Anchor Link

ScatterTooltipCopy Anchor Link

ScatterTooltipContentCopy Anchor Link

Shared componentsCopy Anchor Link

On this page

Usage

Bubble size

Materials

Interaction and accessibility

API reference

ScatterChart

ScatterSeries

ScatterTooltip

ScatterTooltipContent

Shared components