Pareto Error Chart
A Pareto chart pairing error category bars sorted by volume with a cumulative share line on a second percentage axis.
A Pareto chart pairing error category bars sorted by volume with a cumulative share line on a second percentage axis.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Pareto Error Chart is the error triage panel, six categories sorted by volume from Timeout (412) down to Other (21), each a bar on the left count axis. A cumulative share line rides the right percentage axis and climbs from 45.8% at the first category to 100% at the last, so the reader sees how few categories carry most of the volume. The header callout reads the total, 811 errors across the last 7 days.
The block is a recharts ComposedChart on ui/chart, with a Bar bound to the count axis and a Line bound to a second percentage axis fixed to a 0 to 100 domain. The category counts and precomputed cumulative values live in one typed array, so swapping in your real error aggregates is a single data update.
Reach for this block on a reliability or observability dashboard where the team needs to know which error classes to fix first. Wire the array to your logging backend grouped by error type, sorted descending, with the cumulative share running left to right so the 80/20 line is honest.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the production error breakdown by category. Other Pareto reads:
Tip: sort the bars strictly by volume so the cumulative line only ever rises; an out-of-order bar breaks the read.