Skip to main content
Donut and pie charts use the amCharts 5 PieChart and PieSeries classes. All three Anvil2 themes apply design-token-based colors and chart styling automatically.
For design guidelines on donut chart spacing, direct labeling, and variable ordering, see Donut Charts design guidelines.

​
Basic donut chart

A donut chart is a PieChart with an innerRadius set. The theme styles slice labels with a white semi-transparent background and pointer cursors, while this example configures the label text to show percentages inside each slice.

​
Adding a legend

Add a legend to display category names alongside the chart. Set the chart layout to horizontalLayout and position the legend vertically beside the donut.
All three Anvil2 themes set clickTarget: "none" on legends. This disables the default amCharts behavior where clicking a legend item toggles the corresponding series on and off. If you need clickable legends, override this setting after applying the theme: legend.set("clickTarget", "itemContainer").

​
Hover behavior

The theme registers pointerover and pointerout event handlers on all Slice elements. When a user hovers over a slice, all sibling slices dim to 20% opacity. This behavior applies to every pie and donut chart using the theme and cannot be disabled without overriding the theme rules.

​
Pie chart (without inner radius)

The design guidelines recommend donut charts over pie charts for dashboard layouts. Donut charts provide a cleaner layout and allow central labeling of key metrics. Use a pie chart only when the open center is not needed. To create a standard pie chart instead of a donut, omit the innerRadius property: 
const chart = root.container.children.push(
  am5percent.PieChart.new(root, {
    layout: root.horizontalLayout,
    // No innerRadius — renders as a full pie chart
  }),
);

​
Using different themes

Change the theme import to apply a different color palette. The chart structure stays the same.

​
Monochrome theme

Use ThemeMonochrome for data with a natural order or progression, or when displaying 4 or fewer variables. This is the default theme used in the examples above. 
import { ThemeMonochrome } from "@servicetitan/anvil2-ext-charts/am5";

root.setThemes([
  am5themes_Animated.new(root),
  ThemeMonochrome.new(root),
]);

​
Categorical theme

Use ThemeCategorical when displaying 5 or more distinct categories that need maximum color differentiation. 
import { ThemeCategorical } from "@servicetitan/anvil2-ext-charts/am5";

root.setThemes([
  am5themes_Animated.new(root),
  ThemeCategorical.new(root),
]);
The categorical palette colors do not all meet 3:1 contrast against each other. When using ThemeCategorical, include direct labeling on slices to meet accessibility requirements. The theme applies percentage labels by default, which satisfies this requirement for most cases.

​
Semantic theme

Use ThemeSemantic when data represents status values. Colors follow the order: Success, Neutral, Warning, Danger. 
import { ThemeSemantic } from "@servicetitan/anvil2-ext-charts/am5";

root.setThemes([
  am5themes_Animated.new(root),
  ThemeSemantic.new(root),
]);

​
Tooltips

The theme applies tooltips that match the Anvil2 Tooltip styling across all chart types. Customize the tooltip text format on the series: 
// The tooltip is automatically created by the theme on PieChart
// Customize the text format on the series instead:
series.slices.template.set("tooltipText", "{category}: {value}");
Last modified on March 12, 2026