BoxPlot

Use BoxPlot

Compare the median, quartiles and spread across groups, such as request latency by service.

"use client";

import { FloodRoot, BoxPlot } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <BoxPlot label="Request latency (ms)" items={[
        {id:"api", label:"API", summary:{low:42, q1:74, median:96, q3:128, high:176}, outliers:[203]},
        {id:"search", label:"Search", summary:{low:32, q1:58, median:88, q3:154, high:210}}
      ]} />
    </FloodRoot>
  );
}

Design notes

• Supply a five-number summary for each group. The box spans Q1 to Q3 and the white line marks the median. Supply whiskers and outliers using the same statistical convention across groups.
• Use null for a missing summary. Use the same domain across related charts and include all observations, including outliers.
• Hover, tap or use the arrow keys to inspect the summary and outlier count. Use formatAxisValue for shorter ticks when units are already visible. Set --flood-chart-plot-height on a shared parent to align plot heights with Histogram.

API reference