Skip to main content

​
Constructor

Creates a new pie series instance. 
const pieSeries = new PieSeries();

​
Properties

​
pieData
PieData[]
default:"[]"
Array of pie data entries. Each entry has label, value, and optional color.
​
name
string
default:"Series"
Name of the series displayed in the legend.
​
colors
string[]
Array of default colors used for slices when individual colors are not specified.
​
innerRadius
number
default:"0"
Inner radius as a fraction of outer radius (0-1). Set to 0 for pie chart, >0 for donut chart.
​
showLabels
boolean
default:"true"
Whether to show percentage labels on slices (only for slices >5%).
​
showLegend
boolean
default:"true"
Whether to show the legend below the chart.
​
animationEnabled
boolean
default:"true"
Whether animations are enabled for this series.
​
animationDuration
number
default:"600"
Duration of animations in milliseconds.

​
Methods

​
setData

Updates the pie data and triggers animation if enabled.
​
data
PieData[]
required
Array of pie data entries.
pieSeries.setData([
  { label: "Product A", value: 100, color: "#3b82f6" },
  { label: "Product B", value: 150 },
  { label: "Product C", value: 75 },
  { label: "Product D", value: 200 }
]);

​
render

Renders the pie series on the canvas. Called automatically during the chart render cycle. 
pieSeries.render();

​
enableAnimation

Enables animation for the series with an optional custom duration.
​
duration
number
default:"600"
Animation duration in milliseconds.
pieSeries.enableAnimation(800);

​
disableAnimation

Disables animation for the series. 
pieSeries.disableAnimation();

​
startAnimation

Manually triggers the render animation. 
pieSeries.startAnimation();

​
getDataAt

Returns the pie slice data at the given position if the position is within a slice.
​
point
Point
required
Position to query, typically mouse coordinates in pixels.
​
return
Point | null
The pie data extended as a Point object if the position is within a slice, or null otherwise.
const sliceData = pieSeries.getDataAt({ x: 100, y: 200 });

​
Data format

Pie series uses a specialized PieData format:
PieData interface
interface PieData {
  label: string;
  value: number;
  color?: string;
}

const data: PieData[] = [
  { label: "Revenue", value: 450000 },
  { label: "Costs", value: 280000 },
  { label: "Profit", value: 170000 }
];

​
Configuration

When using the Chart API, configure pie series through the series config:
PieSeriesConfig
interface PieSeriesConfig {
  type: "pie";
  data: PieData[];
  color?: string;
  visible?: boolean;
  name?: string;
  innerRadius?: number;
}

​
Pie vs donut charts

Control the chart type using the innerRadius property:
Standard pie chart with filled center:
pieSeries.innerRadius = 0;

​
Labels and legend

Control visibility of labels and legend: 
// Show percentage labels on slices
pieSeries.showLabels = true;

// Hide percentage labels
pieSeries.showLabels = false;

// Show legend below chart
pieSeries.showLegend = true;

// Hide legend
pieSeries.showLegend = false;
Labels are only displayed on slices that represent more than 5% of the total to avoid visual clutter.

​
Colors

Colors can be specified per slice or use default colors: 
// Custom colors per slice
const data = [
  { label: "A", value: 100, color: "#ff0000" },
  { label: "B", value: 200, color: "#00ff00" }
];

// Default colors (cycles through color array)
pieSeries.colors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6"];
If a slice doesn’t specify a color, it uses the color from the colors array based on its index (with wrapping).

​
Animation

By default, pie series animates on initial render and data updates. The animation:
  • Uses easeOutCubic easing function
  • Draws slices progressively in a clockwise direction
  • Starts from the top (12 o’clock position)
  • Duration is 600ms by default
  • Labels and legend appear after animation completes
// Customize animation duration
pieSeries.enableAnimation(1000);

// Disable animation
pieSeries.disableAnimation();

​
Layout

The pie series automatically:
  • Centers the chart in the available space
  • Reserves 60px at the bottom for the legend (if enabled)
  • Sizes the radius to 75% of available space
  • Adapts to container dimensions

​
Hit testing

The getDataAt method performs geometric hit testing:
  1. Calculates distance from center
  2. Checks if within outer radius and outside inner radius (for donuts)
  3. Calculates angle from center
  4. Determines which slice contains the angle
  5. Returns the slice data with position information

​
Use cases

Pie and donut charts are ideal for:
  • Showing part-to-whole relationships
  • Displaying market share or composition
  • Visualizing budget allocation
  • Representing survey results
  • Comparing proportions (3-7 categories recommended)

Build docs developers (and LLMs) love

Get started for freeTalk to us