Skip to main content
This guide covers the amCharts 5 fundamentals you need to create charts with Anvil2 themes. amCharts 5 is an imperative DOM-based library, so using it in React requires manual lifecycle management that differs from typical React component patterns.
For comprehensive amCharts 5 documentation, visit amcharts.com/docs/v5.

​
amCharts 5 core concepts

​
The root element

Every amCharts 5 chart starts with a root element. The root manages the chart lifecycle and is required to create every other amCharts object. Create it by passing the ID of a container <div>: 
import * as am5 from "@amcharts/amcharts5";

const root = am5.Root.new("chartdiv");

​
The .new() pattern

amCharts 5 uses a static .new() method instead of the new keyword to create instances. The first argument is always the root element: 
// Create a chart
const chart = am5percent.PieChart.new(root, {
  layout: root.horizontalLayout,
  innerRadius: am5.percent(50),
});

// Create a series
const series = am5percent.PieSeries.new(root, {
  valueField: "value",
  categoryField: "category",
});

​
Setting data

Use setAll() to bind data to a series. Pass an array of objects where keys match the field names you configured on the series: 
series.data.setAll([
  { category: "Category A", value: 501 },
  { category: "Category B", value: 302 },
  { category: "Category C", value: 201 },
]);

​
Themes

Themes control the visual appearance of chart elements. Apply themes to the root using setThemes(). You can combine multiple themes, and order matters — later themes override earlier ones: 
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import { ThemeMonochrome } from "@servicetitan/anvil2-ext-charts/am5";

root.setThemes([
  am5themes_Animated.new(root),  // Adds animations
  ThemeMonochrome.new(root),     // Applies Anvil2 styles
]);

​
Using Anvil2 themes in React

​
Basic setup pattern

amCharts 5 manages its own DOM, which does not fit naturally into React’s rendering model. Create the root in a useLayoutEffect and dispose of it on cleanup to prevent memory leaks. In React Strict Mode, effects can run twice in development, so it’s important to dispose the chart root in the cleanup function to avoid duplicate chart instances and visual glitches:

​
Switching themes

To use a different Anvil2 theme, swap the import: 
// Monochrome — ordered/progressive data (default, 4 or fewer variables)
import { ThemeMonochrome } from "@servicetitan/anvil2-ext-charts/am5";

// Categorical — 5+ distinct categories
import { ThemeCategorical } from "@servicetitan/anvil2-ext-charts/am5";

// Semantic — status-based data (success, neutral, warning, danger)
import { ThemeSemantic } from "@servicetitan/anvil2-ext-charts/am5";

​
Combining with amCharts built-in themes

Combine the Anvil2 themes with amCharts built-in themes for additional functionality. The Animated theme adds smooth transitions: 
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import { ThemeCategorical } from "@servicetitan/anvil2-ext-charts/am5";

root.setThemes([
  am5themes_Animated.new(root),
  ThemeCategorical.new(root),   // Applied last so Anvil2 styles take precedence
]);
Theme order matters. The Anvil2 theme must come after amCharts built-in themes in the array. If you place it first, the built-in theme will override Anvil2’s color palette, tooltip styling, and other rules.

​
Chart modules

amCharts 5 organizes chart types into separate modules to keep bundle sizes small. Import only the modules you need:
ModuleImportChart types
Core@amcharts/amcharts5Root, Legend, Tooltip, Label, ColorSet
Percent@amcharts/amcharts5/percentPieChart, PieSeries (donut/pie charts)
XY@amcharts/amcharts5/xyXYChart, ColumnSeries, CategoryAxis, ValueAxis (bar charts)
Themes@amcharts/amcharts5/themes/AnimatedBuilt-in animation theme

​
Next steps

Last modified on March 12, 2026