Pie Chart

When To Use A Pie Chart

A pie chart shows how a whole splits into parts: each slice's angle is its share of the total, so it answers "what fraction is this?" at a glance. It works best when:

• the parts add up to a meaningful whole — a budget, a survey's answers, a day's traffic by source;
• there are only a few of them, about five or fewer, so every slice is big enough to see and label;
• one or two parts stand out, since the eye compares a slice against the whole far better than against a slice of nearly the same size.

Reach for another chart when those don't hold. To compare parts that are close in size, or more than a handful of them, a bar chart puts the values on a common scale. To show how the parts change over time, use a line or area chart. And for the same slices with the total written in the middle, use the donut chart, which takes the same data.

Every slice can be reached from the keyboard, and is announced by its key and value, so a pie chart doesn't depend on seeing its colors (see Accessibility).

With A Legend

A legend names the slices, and lets readers switch them off to compare the rest. Click an item below to hide or show its slice.

The legend's items and the chart's slices come from the same data, in the same order: a legend item with no colorOverride takes the theme palette's color for its position, just as the slice does. Hiding a slice sets its hide rather than removing it, so it keeps its place — and its color — and the swatches keep matching.

import { Component, computed, signal } from '@angular/core';
import { PcacLegend, PcacLegendConfig, PcacLegendConfigItem, PcacPieChart, PcacPieChartConfig } from '@pioneer-code/pioneer-charts';

@Component({
  imports: [PcacLegend, PcacPieChart],
  template: `
    <pcac-legend [config]="legend()" (itemClicked)="onItemClicked($event)" />
    <pcac-pie-chart [config]="pie()" />
  `,
})
export class SnacksComponent {
  readonly config = signal<PcacPieChartConfig>({ data: [ ... ], height: 200 });

  /** The slices switched off from the legend, by key. */
  readonly hidden = signal<ReadonlySet<string>>(new Set());

  readonly legend = computed<PcacLegendConfig>(() => ({
    heading: 'Snacks',
    items: this.config().data.map((slice) => ({
      label: String(slice.key),
      checked: !this.hidden().has(String(slice.key)),
      colorOverride: null,
    })),
  }));

  readonly pie = computed<PcacPieChartConfig>(() => ({
    ...this.config(),
    data: this.config().data.map((slice) => ({ ...slice, hide: this.hidden().has(String(slice.key)) })),
  }));

  onItemClicked(items: PcacLegendConfigItem[]): void {
    this.hidden.set(new Set(items.filter((item) => !item.checked).map((item) => item.label)));
  }
}

Markup

<pcac-pie-chart [config]="config" (sliceClicked)="onClicked($event)" />

API

import { PcacPieChart, PcacPieChartConfig } from '@pioneer-code/pioneer-charts';

Events