BoxPlot

Loading chart…

Caller-computed response time summaries, in milliseconds
Endpoint	Lower whisker (ms)	Q1 (ms)	Median (ms)	Q3 (ms)	Upper whisker (ms)	Outlier (ms)
Search	18	32	44	61	84	112
Checkout	26	46	68	88	126	154
Profile	12	22	31	46	72	98

example.tsx

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

const data = [
  {
    period: "Search",
    lowerWhisker: 18,
    q1: 32,
    median: 44,
    q3: 61,
    upperWhisker: 84,
    outlier: 112,
  },
  {
    period: "Checkout",
    lowerWhisker: 26,
    q1: 46,
    median: 68,
    q3: 88,
    upperWhisker: 126,
    outlier: 154,
  },
  {
    period: "Profile",
    lowerWhisker: 12,
    q1: 22,
    median: 31,
    q3: 46,
    upperWhisker: 72,
    outlier: 98,
  },
];
const config = {
  latency: { label: "Response time · ms", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function ResponseTimeBoxPlot() {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.BoxPlotChart
          data={data}
          animate
          accessibilityLayer
          margin={{ top: 20, right: 24, bottom: 8, left: 0 }}
          aria-label="Response time distributions in milliseconds"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={12}
            height={48}
            interval={0}
          />
          <Chart.YAxis
            type="number"
            domain={[0, 180]}
            axisLine={false}
            tickLine={false}
            tickMargin={8}
            width={72}
          />
          <Chart.BoxPlotSeries<(typeof data)[number]>
            dataKey={(row) => ({
              lowerWhisker: row.lowerWhisker,
              q1: row.q1,
              median: row.median,
              q3: row.q3,
              upperWhisker: row.upperWhisker,
              outliers: [row.outlier],
            })}
            seriesKey="latency"
            barSize={32}
            strokeWidth={1.5}
            fillOpacity={0.28}
          />
          <Chart.Tooltip
            maxWidth={220}
            content={({ active, payload, label }) => {
              const row = payload?.[0]?.payload as (typeof data)[number] | undefined;
              if (!active || !row) return null;
              return (
                <div data-kind-ui="chart-tooltip">
                  <strong>{label}</strong>
                  <dl>
                    <div>
                      <dt>Lower whisker</dt>
                      <dd>{row.lowerWhisker} ms</dd>
                    </div>
                    <div>
                      <dt>Q1</dt>
                      <dd>{row.q1} ms</dd>
                    </div>
                    <div>
                      <dt>Median</dt>
                      <dd>{row.median} ms</dd>
                    </div>
                    <div>
                      <dt>Q3</dt>
                      <dd>{row.q3} ms</dd>
                    </div>
                    <div>
                      <dt>Upper whisker</dt>
                      <dd>{row.upperWhisker} ms</dd>
                    </div>
                    <div>
                      <dt>Outlier</dt>
                      <dd>{row.outlier} ms</dd>
                    </div>
                  </dl>
                </div>
              );
            }}
          />
        </Chart.BoxPlotChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Usage

Supply caller-computed quartiles, whiskers and outliers to BoxPlotSeries.

Composition

<Chart.Root config={config}>
  <Chart.Legend />
  <Chart.ResponsiveContainer width="100%" height={280}>
    <Chart.BoxPlotChart data={data} animate accessibilityLayer aria-label="Response time distributions">
      <Chart.CartesianGrid vertical={false} />
      <Chart.XAxis dataKey="period" />
      <Chart.YAxis type="number" domain={[0, 180]} />
      <Chart.BoxPlotSeries<(typeof data)[number]>
        dataKey={(row) => ({
          lowerWhisker: row.lowerWhisker,
          q1: row.q1,
          median: row.median,
          q3: row.q3,
          upperWhisker: row.upperWhisker,
          outliers: [row.outlier],
        })}
        seriesKey="latency"
        barSize={32}
      />
      <Chart.Tooltip content={({ active, payload }) =>
        active && payload?.[0] ? (
          <div data-kind-ui="chart-tooltip">
            Median: {payload[0].payload.median} ms
          </div>
        ) : null
      } />
    </Chart.BoxPlotChart>
  </Chart.ResponsiveContainer>
</Chart.Root>

The tooltip reads the original row from payload to label statistics; native range values alone describe only the enclosing extent.

Supply finite ordered statistics: lowerWhisker <= q1 <= median <= q3 <= upperWhisker. Outliers must be finite and strictly outside the whiskers; duplicates remain separate, possibly overlapping marks.

Numeric domains must include every outlier; native domain inference includes them.

Compute quartiles, whiskers and outliers before rendering; Kind chooses no statistical convention. Boxes span Q1–Q3, lines mark medians and whiskers, and circles show outliers.

Equal quartiles collapse to a line. Equal whiskers, zero and negative values are valid. Missing summaries or empty data draw no marks; malformed present summaries throw.

Collapsed and missing summaries

Stable and Zero have collapsed summaries; Pending has no mark but retains its category label. Variable includes negative values and outliers.

Loading chart…

Caller-computed change summaries, in percentage points; missing values are not zero
Group	Summary (percentage points)
Stable	Lower whisker, Q1, median, Q3 and upper whisker: 5. No outliers.
Zero	Lower whisker, Q1, median, Q3 and upper whisker: 0. No outliers.
Pending	Missing summary; no mark.
Variable	Lower whisker: -12; Q1: -5; median: 1; Q3: 8; upper whisker: 18; outliers: -20, 24.

example.tsx

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

type Row = { period: string; summary: Chart.BoxPlotSummary | null };
const data: Row[] = [
  { period: "Stable", summary: { lowerWhisker: 5, q1: 5, median: 5, q3: 5, upperWhisker: 5 } },
  { period: "Zero", summary: { lowerWhisker: 0, q1: 0, median: 0, q3: 0, upperWhisker: 0 } },
  { period: "Pending", summary: null },
  {
    period: "Variable",
    summary: { lowerWhisker: -12, q1: -5, median: 1, q3: 8, upperWhisker: 18, outliers: [-20, 24] },
  },
];
const config = {
  change: { label: "Change · percentage points", color: "#16756c" },
} satisfies Chart.SeriesConfig;

export function EdgeCaseBoxPlot() {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.BoxPlotChart
          data={data}
          animate
          accessibilityLayer
          aria-label="Collapsed, zero, missing and variable distributions"
          margin={{ top: 20, right: 24, bottom: 8, left: 0 }}
        >
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={12}
            height={48}
            interval={0}
            tick={{ fontSize: 11 }}
          />
          <Chart.YAxis
            type="number"
            domain={[-25, 30]}
            axisLine={false}
            tickLine={false}
            tickMargin={8}
            width={72}
          />
          <Chart.BoxPlotSeries<Row>
            dataKey="summary"
            seriesKey="change"
            barSize={28}
            strokeWidth={2.5}
          />
          <Chart.Tooltip
            maxWidth={220}
            content={({ active, payload, label }) => {
              const row = payload?.[0]?.payload as Row | undefined;
              if (!active || !row?.summary) return null;
              const summary = row.summary;
              return (
                <div data-kind-ui="chart-tooltip">
                  <strong>{label}</strong>
                  <dl>
                    <div>
                      <dt>Lower whisker</dt>
                      <dd>{summary.lowerWhisker} pp</dd>
                    </div>
                    <div>
                      <dt>Q1</dt>
                      <dd>{summary.q1} pp</dd>
                    </div>
                    <div>
                      <dt>Median</dt>
                      <dd>{summary.median} pp</dd>
                    </div>
                    <div>
                      <dt>Q3</dt>
                      <dd>{summary.q3} pp</dd>
                    </div>
                    <div>
                      <dt>Upper whisker</dt>
                      <dd>{summary.upperWhisker} pp</dd>
                    </div>
                    <div>
                      <dt>Outliers</dt>
                      <dd>{summary.outliers?.join(", ") || "None"}</dd>
                    </div>
                  </dl>
                </div>
              );
            }}
          />
        </Chart.BoxPlotChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Horizontal distributions

Use layout="vertical" with numeric X and categorical Y axes for horizontal boxes.

Loading chart…

Caller-computed response time summaries, in milliseconds
Endpoint	Lower whisker (ms)	Q1 (ms)	Median (ms)	Q3 (ms)	Upper whisker (ms)	Outlier (ms)
Search	18	32	44	61	84	112
Checkout	26	46	68	88	126	154
Profile	12	22	31	46	72	98

example.tsx

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

const data = [
  {
    period: "Search",
    lowerWhisker: 18,
    q1: 32,
    median: 44,
    q3: 61,
    upperWhisker: 84,
    outlier: 112,
  },
  {
    period: "Checkout",
    lowerWhisker: 26,
    q1: 46,
    median: 68,
    q3: 88,
    upperWhisker: 126,
    outlier: 154,
  },
  {
    period: "Profile",
    lowerWhisker: 12,
    q1: 22,
    median: 31,
    q3: 46,
    upperWhisker: 72,
    outlier: 98,
  },
];
const config = {
  latency: { label: "Response time · ms", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function HorizontalResponseTimeBoxPlot() {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.BoxPlotChart
          data={data}
          animate
          accessibilityLayer
          layout="vertical"
          margin={{ top: 20, right: 24, bottom: 8, left: 0 }}
          aria-label="Response time distributions in milliseconds"
        >
          <Chart.CartesianGrid horizontal={false} strokeDasharray="3 3" />
          <Chart.XAxis
            type="number"
            domain={[0, 180]}
            tickFormatter={(value: number) => `${value}`}
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            height={44}
          />
          <Chart.YAxis
            type="category"
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={8}
            width={120}
            interval={0}
          />
          <Chart.BoxPlotSeries<(typeof data)[number]>
            dataKey={(row) => ({
              lowerWhisker: row.lowerWhisker,
              q1: row.q1,
              median: row.median,
              q3: row.q3,
              upperWhisker: row.upperWhisker,
              outliers: [row.outlier],
            })}
            seriesKey="latency"
            barSize={32}
            strokeWidth={1.5}
            fillOpacity={0.28}
          />
          <Chart.Tooltip
            maxWidth={220}
            content={({ active, payload, label }) => {
              const row = payload?.[0]?.payload as (typeof data)[number] | undefined;
              if (!active || !row) return null;
              return (
                <div data-kind-ui="chart-tooltip">
                  <strong>{label}</strong>
                  <dl>
                    <div>
                      <dt>Lower whisker</dt>
                      <dd>{row.lowerWhisker} ms</dd>
                    </div>
                    <div>
                      <dt>Q1</dt>
                      <dd>{row.q1} ms</dd>
                    </div>
                    <div>
                      <dt>Median</dt>
                      <dd>{row.median} ms</dd>
                    </div>
                    <div>
                      <dt>Q3</dt>
                      <dd>{row.q3} ms</dd>
                    </div>
                    <div>
                      <dt>Upper whisker</dt>
                      <dd>{row.upperWhisker} ms</dd>
                    </div>
                    <div>
                      <dt>Outlier</dt>
                      <dd>{row.outlier} ms</dd>
                    </div>
                  </dl>
                </div>
              );
            }}
          />
        </Chart.BoxPlotChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Materials

Choose plain, paper, clay or glow. Explicit filter or style.filter overrides the finish; custom shapes can compose BoxPlotMark directly.

Loading chart…

Caller-computed response time summaries, in milliseconds
Endpoint	Lower whisker (ms)	Q1 (ms)	Median (ms)	Q3 (ms)	Upper whisker (ms)	Outlier (ms)
Search	18	32	44	61	84	112
Checkout	26	46	68	88	126	154
Profile	12	22	31	46	72	98

example.tsx

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

const data = [
  {
    period: "Search",
    lowerWhisker: 18,
    q1: 32,
    median: 44,
    q3: 61,
    upperWhisker: 84,
    outlier: 112,
  },
  {
    period: "Checkout",
    lowerWhisker: 26,
    q1: 46,
    median: 68,
    q3: 88,
    upperWhisker: 126,
    outlier: 154,
  },
  {
    period: "Profile",
    lowerWhisker: 12,
    q1: 22,
    median: 31,
    q3: 46,
    upperWhisker: 72,
    outlier: 98,
  },
];
const config = {
  latency: { label: "Response time · ms", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function MaterialResponseTimeBoxPlot({
  material = "paper",
}: {
  material?: "plain" | "paper" | "clay" | "glow";
} = {}) {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.BoxPlotChart
          data={data}
          animate
          accessibilityLayer
          margin={{ top: 20, right: 24, bottom: 8, left: 0 }}
          aria-label="Response time distributions in milliseconds"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={12}
            height={48}
            interval={0}
          />
          <Chart.YAxis
            type="number"
            domain={[0, 180]}
            axisLine={false}
            tickLine={false}
            tickMargin={8}
            width={72}
          />
          <Chart.BoxPlotSeries<(typeof data)[number]>
            dataKey={(row) => ({
              lowerWhisker: row.lowerWhisker,
              q1: row.q1,
              median: row.median,
              q3: row.q3,
              upperWhisker: row.upperWhisker,
              outliers: [row.outlier],
            })}
            seriesKey="latency"
            barSize={32}
            strokeWidth={1.5}
            fillOpacity={0.28}
            material={material}
          />
          <Chart.Tooltip
            maxWidth={220}
            content={({ active, payload, label }) => {
              const row = payload?.[0]?.payload as (typeof data)[number] | undefined;
              if (!active || !row) return null;
              return (
                <div data-kind-ui="chart-tooltip">
                  <strong>{label}</strong>
                  <dl>
                    <div>
                      <dt>Lower whisker</dt>
                      <dd>{row.lowerWhisker} ms</dd>
                    </div>
                    <div>
                      <dt>Q1</dt>
                      <dd>{row.q1} ms</dd>
                    </div>
                    <div>
                      <dt>Median</dt>
                      <dd>{row.median} ms</dd>
                    </div>
                    <div>
                      <dt>Q3</dt>
                      <dd>{row.q3} ms</dd>
                    </div>
                    <div>
                      <dt>Upper whisker</dt>
                      <dd>{row.upperWhisker} ms</dd>
                    </div>
                    <div>
                      <dt>Outlier</dt>
                      <dd>{row.outlier} ms</dd>
                    </div>
                  </dl>
                </div>
              );
            }}
          />
        </Chart.BoxPlotChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

API reference

Focused props for explicit range-Bar composition. BoxPlot uses public axis-scale hooks; it has no configured wrapper.

BoxPlotChart

Prop	Type	Default	Description
`data`	`Row[]`	—	Consumer-owned observations containing summaries or accessor inputs.
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	Native layout; `"vertical"` gives horizontal boxes with numeric X and categorical Y axes.
`animate`	`boolean \| BarAnimation`	`false`	Chart-owned clipped entrance; respects reduced motion. Native per-series animation is disabled.
`accessibilityLayer`	`boolean`	`true` in Recharts	Native keyboard inspection. Set explicitly in these components.
`aria-label` / `aria-labelledby`	`string`	—	Accessible plot name.
`children`	`ReactNode`	—	Explicit series, axes, grid and tooltip.

Custom range shapes retain inspection but cannot use Bar category emphasis. See Recharts BarChart.

BoxPlotSeries

Prop	Type	Default	Description
`dataKey`	`(keyof Row & string) \| ((row: Row) => BoxPlotSummary \| null \| undefined)`	Required	Direct property name or accessor; nested string paths are not interpreted.
`seriesKey`	`string`	Required	Root metadata, color and visibility identity, independent of the generated range accessor.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Static mark finish. Explicit filters and custom shapes retain ownership.
`barSize`	`number \| string`	Native automatic sizing	Category-axis width; numbers are pixels, native percentage strings are also accepted.
`outlierRadius`	`number`	`3`	Radius of each outlier circle in screen pixels.
`shape`	`(props: BoxPlotShapeProps) => ReactNode`	Built-in mark	Receives original summary, native Bar shape props and mapped coordinates. Owns returned markup.
`markProps`	SVG group props, excluding `children`	—	Attributes, styles, handlers and refs forwarded to each present mark group.
`xAxisId` / `yAxisId`	`string \| number`	`0`	Native axes used to map statistical values.
`hide`	`boolean`	`false`	Native hiding; Root controlled visibility also applies.

Stacking, minPointSize, background, radius and activeBar are excluded. Cells, labels and handlers remain available. LabelList positions refer to the enclosing range. See Recharts Bar.

BoxPlotMark

Renders caller-owned screen coordinates; it neither computes statistics nor maps domains.

Prop	Type	Default	Description
`coordinates`	`BoxPlotSummary`	Required	Already mapped screen coordinates; these can reverse on a vertical numeric scale.
`center`	`number`	Required	Category-axis center in pixels.
`size`	`number`	Required	Category-axis mark width in pixels.
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Direction of the quantitative geometry.
`outlierRadius`	`number`	`3`	Screen-space circle radius.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Static finish; explicit group filters take precedence.
`strokeWidth`	SVG stroke width	`1.5`	Native stroke width; explicit SVG paint stays consumer-owned.

BoxPlotSummary and helpers

Prop	Type	Default	Description
`lowerWhisker` / `upperWhisker`	`number`	Required	Caller-defined finite whisker endpoints.
`q1` / `q3`	`number`	Required	Caller-computed finite quartiles, ordered within whiskers.
`median`	`number`	Required	Finite value between Q1 and Q3.
`outliers`	`readonly number[]`	—	Finite observations strictly outside the supplied whiskers.

validateBoxPlotSummary returns valid input unchanged, returns null for missing input, and throws for malformed summaries. boxPlotExtent returns the validated minimum/maximum including outliers. Neither mutates input.

Shared components

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

Usage

Summary contract

Collapsed and missing summaries

Horizontal distributions

Materials

API reference

BoxPlotChart

BoxPlotSeries

BoxPlotMark

BoxPlotSummary and helpers

Shared components

On this page

UsageCopy Anchor Link

Summary contractCopy Anchor Link

Collapsed and missing summariesCopy Anchor Link

Horizontal distributionsCopy Anchor Link

MaterialsCopy Anchor Link

API referenceCopy Anchor Link

BoxPlotChartCopy Anchor Link

BoxPlotSeriesCopy Anchor Link

BoxPlotMarkCopy Anchor Link

BoxPlotSummary and helpersCopy Anchor Link

Shared componentsCopy Anchor Link

On this page

Usage

Summary contract

Collapsed and missing summaries

Horizontal distributions

Materials

API reference

BoxPlotChart

BoxPlotSeries

BoxPlotMark

BoxPlotSummary and helpers

Shared components