Pie Chart

Slice a whole into proportional segments to emphasise composition at a glance.

npm install @plocks/charts

Examples

Properties

Playground

Basics

Proportional slice chart for categorical part-to-whole representation.

Loading demo…

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

import { TRAFFIC_SOURCES } from './data';

export function Demo() {
  return (
    <PieChart
      title="Traffic sources"
      maw={560}
      h={360}
      data={TRAFFIC_SOURCES}
      innerRadius={70}
      outerRadius={150}
      showLabels={true}
      labelPosition="outside"
      showValues={true}
      valueFormatter={(value) => `${value}%`}
      legend={{ show: true, position: 'right' }}
      tooltip={{
        show: true,
        formatter: (segment) => `${segment.label}: ${segment.value}%`,
      }}
      startAngle={-90}
      endAngle={270}
    />
  );
}

Loading demo…

import { PieChart, type PieChartDataPoint } from '@plocks/charts';

import { BROWSER_USAGE } from './data';

const formatLabel = (slice: PieChartDataPoint) => `${slice.label} ${slice.value}%`;

const formatTooltip = (slice: PieChartDataPoint) => `${slice.label}: ${slice.value}% of sessions`;

export function Demo() {
  return (
    <PieChart
      title="Browser usage share"
      subtitle="Active sessions"
      maw={520}
      h={420}
      data={BROWSER_USAGE}
      outerRadius={150}
      showLabels
      labelPosition="outside"
      padAngle={1.5}
      labelFormatter={formatLabel}
      legend={{ show: true, position: 'bottom' }}
      tooltip={{ show: true, formatter: formatTooltip }}
      animation={{ type: 'spiral', duration: 900 }}
      startAngle={-90}
      endAngle={270}
    />
  );
}

Bug Type Distribution

Loading demo…

import { PieChart, type PieChartDataPoint } from '@plocks/charts';

import { BUG_TYPES } from './data';

const formatLabel = (slice: PieChartDataPoint) => `${slice.label} ${slice.value}%`;

const formatTooltip = (slice: PieChartDataPoint) => `${slice.label}: ${slice.value}% of release defects`;

export function Demo() {
  return (
    <PieChart
      title="Bug type distribution"
      subtitle="Latest release cycle"
      maw={560}
      h={380}
      data={BUG_TYPES}
      innerRadius={70}
      outerRadius={150}
      showLabels
      labelPosition="center"
      labelFormatter={formatLabel}
      padAngle={1}
      legend={{ show: true, position: 'right' }}
      tooltip={{ show: true, formatter: formatTooltip }}
      animation={{ type: 'bounce', duration: 800, stagger: 80 }}
      startAngle={-90}
      endAngle={270}
    />
  );
}

Operating Expense Composition

Loading demo…

import { PieChart, type PieChartDataPoint } from '@plocks/charts';

import { OPERATING_EXPENSES, TOTAL_EXPENSE } from './data';

const formatTooltip = (slice: PieChartDataPoint) => {
  const share = Math.round((slice.value / TOTAL_EXPENSE) * 100);
  return `${slice.label}: $${slice.value}M (${share}%)`;
};

export function Demo() {
  return (
    <PieChart
      title="Operating expense mix"
      subtitle="FY25 year-to-date"
      maw={520}
      h={440}
      data={OPERATING_EXPENSES}
      innerRadius={90}
      outerRadius={160}
      showLabels
      labelPosition="outside"
      padAngle={1.5}
      labelFormatter={(slice) => `${slice.label} · $${slice.value}M`}
      legend={{ show: true, position: 'bottom' }}
      tooltip={{ show: true, formatter: formatTooltip }}
      startAngle={-90}
      endAngle={270}
    />
  );
}

Loading demo…

import { PieChart, type PieChartDataPoint } from '@plocks/charts';

import { SUPPORT_CHANNELS, TOTAL_INTERACTIONS } from './data';

const toShare = (value: number) => Math.round((value / TOTAL_INTERACTIONS) * 100);

const formatLabel = (slice: PieChartDataPoint) => `${slice.label} ${toShare(slice.value)}%`;

const formatTooltip = (slice: PieChartDataPoint) => {
  const share = toShare(slice.value);
  return `${slice.label}: ${slice.value.toLocaleString()} interactions (${share}%)`;
};

export function Demo() {
  return (
    <PieChart
      title="Support contact mix"
      subtitle="Last 30 days"
      maw={580}
      h={380}
      data={SUPPORT_CHANNELS}
      innerRadius={80}
      outerRadius={150}
      showLabels
      labelPosition="outside"
      padAngle={1}
      labelFormatter={formatLabel}
      legend={{ show: true, position: 'right' }}
      tooltip={{ show: true, formatter: formatTooltip }}
      startAngle={-70}
      endAngle={290}
    />
  );
}

Loading demo…

import { PieChart, type PieChartDataPoint } from '@plocks/charts';

import { TOTAL_COMPLETIONS, TRAINING_COMPLETIONS } from './data';

const toPercent = (value: number) => Math.round((value / TOTAL_COMPLETIONS) * 100);

const formatLabel = (slice: PieChartDataPoint) => `${slice.label} ${toPercent(slice.value)}%`;

const formatTooltip = (slice: PieChartDataPoint) => {
  const share = toPercent(slice.value);
  return `${slice.label}: ${slice.value.toLocaleString()} completions (${share}%)`;
};

export function Demo() {
  return (
    <PieChart
      title="Training completion share"
      subtitle="Annual compliance program"
      maw={520}
      h={440}
      data={TRAINING_COMPLETIONS}
      innerRadius={100}
      outerRadius={160}
      showLabels
      labelPosition="outside"
      padAngle={1.2}
      labelFormatter={formatLabel}
      legend={{ show: true, position: 'bottom' }}
      tooltip={{ show: true, formatter: formatTooltip }}
      animation={{ type: 'wave', duration: 900, stagger: 70 }}
      startAngle={-100}
      endAngle={260}
    />
  );
}

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

Related charts

Donut Chart

Stacked Bar Chart

Pie Chart

Basics

Browser Usage Share

Bug Type Distribution

Operating Expense Composition

Support Channel Share

Training Completion Share

Related charts

Further reading

plocks