Skip to main content

PieChart

PieChart

Show proportional data with interactive labels

Tags: chart proportion percentage composition

View Demo

The PieChart component displays data as proportional slices of a circle. It's perfect for showing how parts relate to a whole, such as market share, budget allocation, or survey responses.

Reporting props marked Svelte only (valueFormat, showDataTable, exportable, reference lines, data zoom and so on) are available in @classic-homes/charts-svelte; React support is pending.

Import​

<script>
  import { PieChart } from '@classic-homes/charts-svelte';
</script>
// React
import { PieChart } from '@classic-homes/charts-react';

Basic Usage​

<script>
  import { PieChart } from '@classic-homes/charts-svelte';

  const data = [
    { name: 'Search Engine', value: 1048 },
    { name: 'Direct', value: 735 },
    { name: 'Email', value: 580 },
    { name: 'Social Media', value: 484 },
  ];
</script>

<PieChart title="Traffic Sources" {data} showLabels height={400} />

Props​

Chart-Specific Props​

Prop Type Default Description
data PieSliceData[] required Array of slice data with name and value
showLabels boolean true Show labels on slices
labelPosition 'inside' | 'outside' 'outside' Position of slice labels
innerRadius number | string 0 Inner radius (0 for solid pie)
labelFormatter string | ((params: LabelFormatterParams) => string) - Data label template or function
legend ChartLegendConfig - Built-in legend position, alignment, icon and formatter
onLegendChange (visible: Record<string, boolean>) => void - Called when legend items are shown or hidden
renderLegend Snippet<[LegendRenderProps]> - Custom HTML legend (e.g. ChartLegend) instead of the built-in one; React takes a function returning a node
onClick (params: SliceEventParams) => void - Callback when a slice is clicked

Inherited Base Props​

Prop Type Default Description
title string required Chart title for accessibility
height number | string 400 Chart height
theme 'light' | 'dark' | 'auto' 'auto' Theme preference
showLegend boolean true Show chart legend
showTooltip boolean true Show tooltip on hover
tooltipFormatter string | ((items: TooltipFormatterParams[]) => string) - Custom tooltip template or HTML function
tooltipValueFormatter (value: number) => string - Format values in the default tooltip
option EChartsOption - Raw ECharts option deep-merged over the generated one
description string - Optional description for screen readers
minHeight number - Minimum height in pixels; also bounds an 'auto' height
maxHeight number - Maximum height in pixels; also bounds an 'auto' height
loading boolean false Show loading skeleton; over existing data a loading overlay is shown instead (Svelte)
error string | null - Error message to display
onRetry () => void - Show a Retry button on the error state, calling this (Svelte only)
emptyMessage string - Message shown when data is empty
valueFormat ValueFormatPreset | Intl.NumberFormatOptions | ((value: number) => string) - How values are written in value axes, tooltips, labels and the data table: 'number', 'integer', 'compact', 'currency', 'currencyCents', 'percent', 'percentValue', 'days', Intl options or a function (Svelte only)
locale string 'en-US' Locale for valueFormat (Svelte only)
onReady (chart: EChartsType) => void - Called with the ECharts instance when it is created (Svelte only)
events Record<string, (params) => void> - Raw ECharts event handlers keyed by event name, e.g. datazoom (Svelte only)
showDataTable boolean | 'sr-only' 'sr-only' Render the data as a table: 'sr-only' for screen readers, true adds a visible "Show data" toggle, false for none (Svelte only)
exportable boolean | ChartExportConfig false Show PNG and CSV download buttons; or { image, csv, filename } (Svelte only)
patterns boolean false Fill series with decal patterns as well as colour, for colour-blind readers (Svelte only)
class string - Custom CSS class
animation boolean true Enable/disable animations (respects prefers-reduced-motion)
showGrid boolean - Show grid lines (where applicable)

Data Structure​

interface PieSliceData {
  name: string; // Slice label
  value: number; // Slice value
  color?: string; // Optional custom color
}

Examples​

With Outside Labels​

<PieChart title="Market Share" {data} showLabels labelPosition="outside" height={400} />

With Inside Labels​

<PieChart title="Market Share" {data} showLabels labelPosition="inside" height={400} />

Handling Click Events​

<script>
  function handleClick(params) {
    console.log('Clicked slice:', params.name, params.value);
  }
</script>

<PieChart title="Interactive Pie" {data} onClick={handleClick} />

Custom Labels​

<PieChart
  title="Market Share"
  data={[
    { name: 'Product A', value: 335, label: 'Leader' },
    { name: 'Product B', value: 310 },
  ]}
  labelFormatter={'{b}\n{d}%'}
/>

Custom Legend on the Right​

<script>
  import { PieChart, ChartLegend } from '@classic-homes/charts-svelte';
</script>

{#snippet legend(props)}
  <ChartLegend {...props} />
{/snippet}

<PieChart title="Market Share" {data} renderLegend={legend} legend={{ position: 'right' }} />

Accessibility​

  • The title prop provides aria-label for screen readers
  • Animations respect user motion preferences
  • Legend provides additional context for data
On this page