Pareto Chart

Pareto charts combine bar charts with a cumulative line to identify the vital few causes. Chart.ts renders them as SVG with automatic percentage calculations, dual axes, and the 80% threshold line. Perfect for quality analysis and prioritization.

$npm install @chartts/core
example.tsx
import { pareto } from "@chartts/core"

const svg = pareto({
  data: [
    { cause: "UI Bugs", count: 45 },
    { cause: "API Errors", count: 32 },
    { cause: "Performance", count: 18 },
    { cause: "Auth Issues", count: 12 },
    { cause: "Data Loss", count: 8 },
    { cause: "Other", count: 5 },
  ],
  label: "cause",
  value: "count",
  showThreshold: true,
})

Features

Combined bar and cumulative line
Automatic percentage calculation
80% threshold line
Dual y-axes (count and percentage)
Sorted by frequency automatically
Tailwind CSS on all elements
SVG rendering with accessibility
Read the DocsSee DemosExamples