Home›Bar›Pareto Chart (80/20 Rule Analysis)
NEWPOPULARBar

Pareto Chart (80/20 Rule Analysis)

Pareto chart combining descending defect frequency bars with a cumulative percentage line curve and an 80% reference cutoff threshold.

Loading chart…
#pareto#80-20#bar#line#quality#analytics
Customization Guides & Code Snippets

◆Configuring Dual Y-Axes for Frequencies & Cumulative %

Assign yAxisId='left' for raw defect frequency counts and yAxisId='right' with domain={[0, 100]} for the cumulative percentage curve.

<YAxis yAxisId="left" stroke="#5c6370" />
<YAxis yAxisId="right" orientation="right" domain={[0, 100]} tickFormatter={(v) => `${v}%`} />

◆Adding the 80% Cutoff Reference Line

Place a dashed ReferenceLine at y={80} mapped to the right percentage axis to highlight the vital few causes separating the trivial many.

<ReferenceLine yAxisId="right" y={80} stroke="#ffd166" strokeDasharray="4 4" strokeWidth={1.5} />
When to use a Pareto Chart (80/20 Rule Analysis)

A Pareto Chart (80/20 Rule Analysis) is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Comparing values across multiple categories (e.g. monthly revenue per region)
  • ✓Showing ranked data where order matters (e.g. top 10 products by sales)
  • ✓Displaying survey results or poll responses
  • ✓Visualizing before/after comparisons
Tips for Recharts Pareto Chart (80/20 Rule Analysis)
TIP 1Always start the Y-axis at zero to avoid misleading comparisons
TIP 2Use rounded corners (radius prop) for a modern, polished look
TIP 3Add a Tooltip component so users can see exact values on hover
TIP 4Use Cell components to color individual bars differently
TIP 5For long category names, switch to a horizontal bar chart layout
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar
Frequently Asked Questions

What is a Pareto chart and what is the 80/20 rule (pareto chart react)?

A Pareto chart is a data visualization that displays defect or incident frequencies in descending order alongside a cumulative percentage curve. It is based on the Pareto Principle (80/20 rule), which states that roughly 80% of problems or losses stem from just 20% of causes.

How do you create a Pareto chart in Recharts (recharts pareto chart)?

Use <ComposedChart> with dual Y-axes: a left Y-axis for raw incident counts (<Bar yAxisId='left'>) and a right Y-axis for cumulative percentage (<Line yAxisId='right' domain={[0, 100]}>). Add a dashed <ReferenceLine yAxisId='right' y={80} /> to mark the vital few cutoff.

When should you use a Pareto chart?

Use a Pareto chart in quality control, SaaS churn analysis, software bug prioritization, customer support ticket triage, and operational process optimization to determine which high-impact problems to fix first.

Related Charts