Pareto Chart

Combination of bars and a line to highlight the most significant factors in a dataset.

npm install @plocks/charts

Examples

Properties

Playground

Basics

Simple Pareto chart showing how cumulative contribution highlights the dominant defect categories.

Loading demo…

import { ParetoChart } from '@plocks/charts';

import { DEFECT_BREAKDOWN } from './data';

export function Demo() {
  return (
    <ParetoChart
      title="Monthly defect analysis"
      subtitle="Product QA triage"
      h={420}
      data={DEFECT_BREAKDOWN}
      valueSeriesLabel="Defects"
      cumulativeSeriesLabel="Cumulative impact"
      grid={{ show: true, style: 'dotted' }}
      legend={{ show: true, position: 'bottom' }}
      yAxis={{ title: 'Defects reported' }}
      yAxisRight={{ title: 'Cumulative share' }}
    />
  );
}

Customer Support Hotspots

Highlight how a handful of ticket categories drive the majority of support backlog volume.

Loading demo…

import { ParetoChart } from '@plocks/charts';

import { SUPPORT_CASES } from './data';

export function Demo() {
  return (
    <ParetoChart
      title="Support backlog concentration"
      subtitle="Top ten case drivers this quarter"
      h={440}
      data={SUPPORT_CASES}
      valueSeriesLabel="Cases"
      cumulativeSeriesLabel="Cumulative ticket share"
      yAxis={{ title: 'Case volume' }}
      yAxisRight={{ title: 'Cumulative share' }}
    />
  );
}

Incident Root Causes

Root-cause analysis illustrating which failure modes dominate incident volume.

Loading demo…

import { ParetoChart } from '@plocks/charts';

import { POSTMORTEM_CAUSES } from './data';

export function Demo() {
  return (
    <ParetoChart
      title="Incident root causes"
      subtitle="Rolling twelve months"
      h={420}
      data={POSTMORTEM_CAUSES}
      valueSeriesLabel="Incidents"
      cumulativeSeriesLabel="Cumulative impact"
      sortDirection="none"
      categoryLabelFormatter={(label) => label.replace(' ', '\n')}
      legend={{ show: true, position: 'right' }}
    />
  );
}

Revenue Concentration

Examine how a few strategic accounts make up the bulk of recurring revenue.

Loading demo…

import { ParetoChart } from '@plocks/charts';

import { ACCOUNT_REVENUE } from './data';

export function Demo() {
  return (
    <ParetoChart
      title="Annual revenue concentration"
      subtitle="Top enterprise accounts"
      h={460}
      data={ACCOUNT_REVENUE}
      valueSeriesLabel="ARR"
      cumulativeSeriesLabel="Cumulative revenue"
      lineColor="#F97316"
      yAxis={{
        title: 'Recurring revenue',
        labelFormatter: (value) => `$${(value / 1_000_000).toFixed(1)}M`,
      }}
      yAxisRight={{
        title: 'Revenue share',
      }}
    />
  );
}

Scan to open this page on your phoneplocks.dev/charts/ParetoChart

Related charts

Bar Chart

Combo Chart

Pareto Chart

Basics

Customer Support Hotspots

Incident Root Causes

Revenue Concentration

Related charts

Further reading

plocks