Histogram · Kind UI charts

Loading chart…

Response-time bins in milliseconds; [ includes an edge and ) excludes it. 36 accepted, 1 missing, 0 nonfinite, 1 out of range.
Interval (ms)	Requests
[0, 40)	12
[40, 80)	15
[80, 120)	5
[120, 160)	2
[160, 200]	2

example.tsx

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

const data = [
  { period: "Request 1", milliseconds: 12 },
  { period: "Request 2", milliseconds: 18 },
  { period: "Request 3", milliseconds: 23 },
  { period: "Request 4", milliseconds: 25 },
  { period: "Request 5", milliseconds: 27 },
  { period: "Request 6", milliseconds: 30 },
  { period: "Request 7", milliseconds: 31 },
  { period: "Request 8", milliseconds: 32 },
  { period: "Request 9", milliseconds: 34 },
  { period: "Request 10", milliseconds: 35 },
  { period: "Request 11", milliseconds: 36 },
  { period: "Request 12", milliseconds: 38 },
  { period: "Request 13", milliseconds: 40 },
  { period: "Request 14", milliseconds: 42 },
  { period: "Request 15", milliseconds: 43 },
  { period: "Request 16", milliseconds: 45 },
  { period: "Request 17", milliseconds: 47 },
  { period: "Request 18", milliseconds: 49 },
  { period: "Request 19", milliseconds: 50 },
  { period: "Request 20", milliseconds: 52 },
  { period: "Request 21", milliseconds: 55 },
  { period: "Request 22", milliseconds: 58 },
  { period: "Request 23", milliseconds: 60 },
  { period: "Request 24", milliseconds: 63 },
  { period: "Request 25", milliseconds: 66 },
  { period: "Request 26", milliseconds: 70 },
  { period: "Request 27", milliseconds: 74 },
  { period: "Request 28", milliseconds: 80 },
  { period: "Request 29", milliseconds: 88 },
  { period: "Request 30", milliseconds: 95 },
  { period: "Request 31", milliseconds: 100 },
  { period: "Request 32", milliseconds: 110 },
  { period: "Request 33", milliseconds: 125 },
  { period: "Request 34", milliseconds: 150 },
  { period: "Request 35", milliseconds: 180 },
  { period: "Request 36", milliseconds: 200 },
  { period: "Missing reading", milliseconds: null },
  { period: "Outside window", milliseconds: 260 },
];
const result = Chart.binHistogram(
  data.map((row) => row.milliseconds),
  [0, 40, 80, 120, 160, 200],
);
const config = {
  count: { label: "Requests", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function CheckoutLatencyHistogram() {
  return (
    <Chart.Root config={config}>
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.HistogramChart
          bins={result.bins}
          measure="count"
          animate
          accessibilityLayer
          aria-label="Checkout response time, count by millisecond interval"
          margin={{ top: 20, right: 24, bottom: 8, left: 0 }}
          xAxisProps={{
            axisLine: false,
            tickLine: false,
            tickMargin: 12,
            height: 48,
            ticks: [0, 50, 100, 150, 200],
            tickFormatter: (value) => `${value} ms`,
          }}
          yAxisProps={{
            axisLine: false,
            tickLine: false,
            tickMargin: 12,
            width: 40,
            allowDecimals: false,
          }}
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.HistogramSeries />
          <Chart.Tooltip
            labelFormatter={(_label, payload) => {
              const bin = payload[0]?.payload as Chart.HistogramBin | undefined;
              return bin
                ? `${bin.lower}–${bin.upper} ms${bin.upper === 200 ? " (final edge included)" : " (upper edge excluded)"}`
                : "Response time";
            }}
          />
        </Chart.HistogramChart>
      </Chart.ResponsiveContainer>
      <p
        style={{
          fontSize: "0.75rem",
          margin: "8px 0 0",
          color: "var(--color-fd-muted-foreground, #666)",
        }}
      >
        {result.accepted} accepted · {result.missing} missing · {result.nonfinite} nonfinite ·{" "}
        {result.outOfRange} outside 0–200 ms
      </p>
    </Chart.Root>
  );
}

Usage

Use binHistogram to prepare numeric bins for HistogramSeries.

Composition

<Chart.Root config={config}>
  <Chart.ResponsiveContainer width="100%" height={280}>
    <Chart.HistogramChart bins={result.bins} measure="count" animate accessibilityLayer>
      <Chart.CartesianGrid vertical={false} />
      <Chart.HistogramSeries />
      <Chart.Tooltip />
    </Chart.HistogramChart>
  </Chart.ResponsiveContainer>
</Chart.Root>

Bins include their lower edge; only the last bin includes its upper edge. Interior-edge samples go right. Accepted, missing, nonfinite and out-of-range samples are counted separately.

Count height shows observations; rectangle width is the numeric interval span.

Unequal-width density

Density is count / (accepted × bin width). Nonempty rectangle areas sum to one; heights need not. Empty totals yield zero density, and discarded samples do not enter normalization.

Loading chart…

Response-time density; [ includes an edge and ) excludes it. 36 accepted, 1 missing, 0 nonfinite, 1 out of range.
Interval (ms)	Requests	Probability per ms
[0, 25)	3	0.003333333333333333
[25, 50)	15	0.016666666666666666
[50, 100)	12	0.006666666666666666
[100, 200]	6	0.0016666666666666666

example.tsx

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

const data = [
  { period: "Request 1", milliseconds: 12 },
  { period: "Request 2", milliseconds: 18 },
  { period: "Request 3", milliseconds: 23 },
  { period: "Request 4", milliseconds: 25 },
  { period: "Request 5", milliseconds: 27 },
  { period: "Request 6", milliseconds: 30 },
  { period: "Request 7", milliseconds: 31 },
  { period: "Request 8", milliseconds: 32 },
  { period: "Request 9", milliseconds: 34 },
  { period: "Request 10", milliseconds: 35 },
  { period: "Request 11", milliseconds: 36 },
  { period: "Request 12", milliseconds: 38 },
  { period: "Request 13", milliseconds: 40 },
  { period: "Request 14", milliseconds: 42 },
  { period: "Request 15", milliseconds: 43 },
  { period: "Request 16", milliseconds: 45 },
  { period: "Request 17", milliseconds: 47 },
  { period: "Request 18", milliseconds: 49 },
  { period: "Request 19", milliseconds: 50 },
  { period: "Request 20", milliseconds: 52 },
  { period: "Request 21", milliseconds: 55 },
  { period: "Request 22", milliseconds: 58 },
  { period: "Request 23", milliseconds: 60 },
  { period: "Request 24", milliseconds: 63 },
  { period: "Request 25", milliseconds: 66 },
  { period: "Request 26", milliseconds: 70 },
  { period: "Request 27", milliseconds: 74 },
  { period: "Request 28", milliseconds: 80 },
  { period: "Request 29", milliseconds: 88 },
  { period: "Request 30", milliseconds: 95 },
  { period: "Request 31", milliseconds: 100 },
  { period: "Request 32", milliseconds: 110 },
  { period: "Request 33", milliseconds: 125 },
  { period: "Request 34", milliseconds: 150 },
  { period: "Request 35", milliseconds: 180 },
  { period: "Request 36", milliseconds: 200 },
  { period: "Missing reading", milliseconds: null },
  { period: "Outside window", milliseconds: 260 },
];
const result = Chart.binHistogram(
  data.map((row) => row.milliseconds),
  [0, 25, 50, 100, 200],
);
const config = {
  count: {
    label: "Probability per ms",
    color: "#733bff",
    formatValue: (value) => `${Number(value).toFixed(4)} / ms`,
  },
} satisfies Chart.SeriesConfig;

export function CheckoutDensityHistogram() {
  return (
    <Chart.Root config={config}>
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.HistogramChart
          bins={result.bins}
          measure="density"
          animate
          accessibilityLayer
          aria-label="Checkout response time, density by millisecond interval"
          margin={{ top: 20, right: 24, bottom: 8, left: 0 }}
          xAxisProps={{
            axisLine: false,
            tickLine: false,
            tickMargin: 12,
            height: 48,
            ticks: [0, 50, 100, 150, 200],
            tickFormatter: (value) => `${value} ms`,
          }}
          yAxisProps={{
            axisLine: false,
            tickLine: false,
            tickMargin: 12,
            width: 64,

            tickFormatter: (value) => Number(value).toFixed(3),
          }}
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.HistogramSeries />
          <Chart.Tooltip
            labelFormatter={(_label, payload) => {
              const bin = payload[0]?.payload as Chart.HistogramBin | undefined;
              return bin
                ? `${bin.lower}–${bin.upper} ms${bin.upper === 200 ? " (final edge included)" : " (upper edge excluded)"}`
                : "Response time";
            }}
          />
        </Chart.HistogramChart>
      </Chart.ResponsiveContainer>
      <p
        style={{
          fontSize: "0.75rem",
          margin: "8px 0 0",
          color: "var(--color-fd-muted-foreground, #666)",
        }}
      >
        {result.accepted} accepted · {result.missing} missing · {result.nonfinite} nonfinite ·{" "}
        {result.outOfRange} outside 0–200 ms
      </p>
    </Chart.Root>
  );
}

Materials

Choose plain, paper, clay or glow. Numeric bounds stay fixed; custom shape, filter or style.filter owns paint.

Loading chart…

Response-time density; [ includes an edge and ) excludes it. 36 accepted, 1 missing, 0 nonfinite, 1 out of range.
Interval (ms)	Requests	Probability per ms
[0, 25)	3	0.003333333333333333
[25, 50)	15	0.016666666666666666
[50, 100)	12	0.006666666666666666
[100, 200]	6	0.0016666666666666666

example.tsx

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

const data = [
  { period: "Request 1", milliseconds: 12 },
  { period: "Request 2", milliseconds: 18 },
  { period: "Request 3", milliseconds: 23 },
  { period: "Request 4", milliseconds: 25 },
  { period: "Request 5", milliseconds: 27 },
  { period: "Request 6", milliseconds: 30 },
  { period: "Request 7", milliseconds: 31 },
  { period: "Request 8", milliseconds: 32 },
  { period: "Request 9", milliseconds: 34 },
  { period: "Request 10", milliseconds: 35 },
  { period: "Request 11", milliseconds: 36 },
  { period: "Request 12", milliseconds: 38 },
  { period: "Request 13", milliseconds: 40 },
  { period: "Request 14", milliseconds: 42 },
  { period: "Request 15", milliseconds: 43 },
  { period: "Request 16", milliseconds: 45 },
  { period: "Request 17", milliseconds: 47 },
  { period: "Request 18", milliseconds: 49 },
  { period: "Request 19", milliseconds: 50 },
  { period: "Request 20", milliseconds: 52 },
  { period: "Request 21", milliseconds: 55 },
  { period: "Request 22", milliseconds: 58 },
  { period: "Request 23", milliseconds: 60 },
  { period: "Request 24", milliseconds: 63 },
  { period: "Request 25", milliseconds: 66 },
  { period: "Request 26", milliseconds: 70 },
  { period: "Request 27", milliseconds: 74 },
  { period: "Request 28", milliseconds: 80 },
  { period: "Request 29", milliseconds: 88 },
  { period: "Request 30", milliseconds: 95 },
  { period: "Request 31", milliseconds: 100 },
  { period: "Request 32", milliseconds: 110 },
  { period: "Request 33", milliseconds: 125 },
  { period: "Request 34", milliseconds: 150 },
  { period: "Request 35", milliseconds: 180 },
  { period: "Request 36", milliseconds: 200 },
  { period: "Missing reading", milliseconds: null },
  { period: "Outside window", milliseconds: 260 },
];
const result = Chart.binHistogram(
  data.map((row) => row.milliseconds),
  [0, 25, 50, 100, 200],
);
const config = {
  count: {
    label: "Probability per ms",
    color: "#733bff",
    formatValue: (value) => `${Number(value).toFixed(4)} / ms`,
  },
} satisfies Chart.SeriesConfig;

export function MaterialHistogram({
  material = "paper",
}: {
  material?: "plain" | "paper" | "clay" | "glow";
} = {}) {
  return (
    <Chart.Root config={config}>
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.HistogramChart
          bins={result.bins}
          measure="density"
          animate
          accessibilityLayer
          aria-label="Checkout response time, density by millisecond interval"
          margin={{ top: 20, right: 24, bottom: 8, left: 0 }}
          xAxisProps={{
            axisLine: false,
            tickLine: false,
            tickMargin: 12,
            height: 48,
            ticks: [0, 50, 100, 150, 200],
            tickFormatter: (value) => `${value} ms`,
          }}
          yAxisProps={{
            axisLine: false,
            tickLine: false,
            tickMargin: 12,
            width: 64,

            tickFormatter: (value) => Number(value).toFixed(3),
          }}
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.HistogramSeries material={material} />
          <Chart.Tooltip
            labelFormatter={(_label, payload) => {
              const bin = payload[0]?.payload as Chart.HistogramBin | undefined;
              return bin
                ? `${bin.lower}–${bin.upper} ms${bin.upper === 200 ? " (final edge included)" : " (upper edge excluded)"}`
                : "Response time";
            }}
          />
        </Chart.HistogramChart>
      </Chart.ResponsiveContainer>
      <p
        style={{
          fontSize: "0.75rem",
          margin: "8px 0 0",
          color: "var(--color-fd-muted-foreground, #666)",
        }}
      >
        {result.accepted} accepted · {result.missing} missing · {result.nonfinite} nonfinite ·{" "}
        {result.outOfRange} outside 0–200 ms
      </p>
    </Chart.Root>
  );
}

API reference

Use xAxisProps and yAxisProps for tick presentation; Histogram owns quantitative axes and geometry.

binHistogram

Prop	Type	Default	Description
`samples`	`readonly (number \| null \| undefined)[]`	Required	Raw observations; missing, nonfinite and out-of-range values are counted separately.
`edges`	`readonly number[]`	Required	At least two finite, strictly increasing edges with finite positive widths. Invalid edges throw.

Returns HistogramBinningResult: bins, accepted, missing, nonfinite and outOfRange. Each bin has lower, upper and count. No coercion or edge inference occurs.

Pre-aggregated bins may have gaps. Bounds must be ordered, nonoverlapping and finite with positive finite widths; counts and their total must be nonnegative safe integers.

HistogramChart

Prop	Type	Default	Description
`bins`	`readonly HistogramBin[]`	Required	Validated intervals; their first lower and final upper bounds define the horizontal domain.
`measure`	`"count" \| "density"`	Required	Count height or normalized probability density. Numerically unrepresentable density throws.
`animate`	`boolean \| BarAnimation`	`false`	Reuses chart-owned Bar entrance and reduced-motion handling. Options include `revealDurationMs`, `revealEasing` and `hoverTransition`.
`xAxisProps`	Native XAxis presentation props	—	Ticks, tick formatting and spacing; numeric scale, domain, axis identity and bin midpoint are owned.
`yAxisProps`	Native YAxis presentation props	—	Tick presentation; numeric domain is `[0, "dataMax"]`.
`accessibilityLayer`	`boolean`	`true` in Recharts	Arrow-key inspection; set explicitly in these components.
`margin`	`{ top?: number; right?: number; bottom?: number; left?: number }`	`5` each side	Plot spacing.
`children`	`ReactNode`	—	Explicit histogram series, grid and tooltip.

Owns data, vertical layout, scales and spacing. See XAxis, YAxis and BarChart for presentation options.

HistogramSeries

Prop	Type	Default	Description
`seriesKey`	`string`	`"count"`	Root metadata and visibility identity; internal `dataKey` is owned.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Finish on corrected bin rectangles.
`shape`	`(props: HistogramShapeProps) => ReactElement`	—	Native bar shape props with corrected numeric `x`, `width` and original `bin`; custom geometry becomes consumer-owned.
`fill` / `stroke`	`string`	Config color / unset	Explicit paint overrides.
`hide`	`boolean`	`false`	Hides the series; Root visibility also applies.

Requires HistogramChart. Plain bins have square corners and no minimum height. Cells/events remain available; stacking, labels, background, activeBar, bar sizing and axis identity are excluded. See Recharts Bar.

Shared components

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

UsageCopy Anchor Link

Unequal-width densityCopy Anchor Link

MaterialsCopy Anchor Link

API referenceCopy Anchor Link

binHistogramCopy Anchor Link

HistogramChartCopy Anchor Link

HistogramSeriesCopy Anchor Link

Shared componentsCopy Anchor Link

On this page

Usage

Unequal-width density

Materials

API reference

binHistogram

HistogramChart

HistogramSeries

Shared components