React Box Plot

Display statistical distributions with a React box plot. Automatic quartile calculation, whiskers, outlier markers, and Tailwind CSS styling. Perfect for comparing distributions across categories.

$npm install @chartts/react
example.tsx
import { BoxPlotChart } from "@chartts/react"

export function SalaryDistribution() {
  const data = [
    { dept: "Engineering", values: [65, 72, 78, 85, 92, 95, 110] },
    { dept: "Design", values: [55, 62, 68, 74, 80, 85, 95] },
    { dept: "Marketing", values: [48, 55, 62, 70, 76, 82, 88] },
    { dept: "Sales", values: [42, 52, 65, 78, 88, 95, 120] },
  ]

  return (
    <BoxPlotChart
      data={data}
      label="dept"
      values="values"
      className="h-72"
      boxClassName="fill-cyan-400/20 stroke-cyan-400"
    />
  )
}

Features

Automatic quartile and IQR calculation
Whiskers with configurable range
Outlier markers
Horizontal and vertical orientations
SVG rendering with Tailwind CSS
Multiple series comparison
Under 3kb tree-shaken
Read the DocsSee DemosExamples