Pie & Donut Charts
10 pie and donut chart variants rendered live with Canvas2D. Hover, click, and watch animations — every chart below is powered by DiCharts.createDonutChart()
Pie Chart
Classic pie chart with percentage labels — ideal for simple part-to-whole comparisons.
Pie Chart - Label
Pie with name labels on each slice for instant category identification.
Pie Chart - Custom Label
Custom label formatter showing dollar-formatted revenue per stream.
Pie Chart - Label List
External labels with connector lines — great when slices are too small for inside text.
Pie Chart - Legend
Clean pie with a prominent auto-generated legend — no labels on slices.
Pie Chart - Donut
Standard donut with auto center text showing the hovered slice or total.
Pie Chart - Donut Active
Donut with a programmatic active slice — the 2nd slice stays highlighted. Click to change.
Pie Chart - Donut with Text
Donut with custom center text — shows a dynamic title and formatted total.
Pie Chart - Stacked
Nested concentric rings showing multiple data dimensions in a single chart.
Pie Chart - Interactive
Hover to highlight a slice and see a rich tooltip. Non-hovered slices dim to 35% opacity.
All variants, one API
Every chart above is created with a single DiCharts.createDonutChart(container, options) call. Set innerRadius: 0 for a full pie, use labelPosition and labelType for label control, pass stackedData for concentric rings, and enable interactive + showTooltip for hover effects. Pure Canvas2D — works in every browser, no WebGPU required.