A ranked bar chart with a cumulative-share line that highlights the few categories accounting for most of a total, for prioritizing support tickets, defect causes, or churn reasons.
import ParetoChart from "@/components/ui/pareto-chart";
export default function ParetoChartDemo() {
return (
<div className="w-full max-w-2xl rounded-[var(--radius-card)] border border-line bg-surface p-6 shadow-[var(--shadow-card)]">
<ParetoChart
items={[
{ label: "Login issues", value: 412 },
{ label: "Billing question", value: 318 },
{ label: "Export failed", value: 206 },
{ label: "Slow dashboard", value: 141 },
{ label: "SSO setup", value: 88 },
{ label: "Feature request", value: 64 },
{ label: "Webhook errors", value: 41 },
{ label: "Data deletion", value: 23 },
{ label: "Other", value: 19 },
]}
label="Support tickets by reason, September"
valueLabel="Tickets"
/>
</div>
);
}