`:
```tsx theme={null}
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:
```tsx theme={null}
// 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:
```tsx theme={null}
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:
```tsx theme={null}
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:
```tsx lines expandable theme={null}
import { useLayoutEffect } from "react";
import * as am5 from "@amcharts/amcharts5";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import * as am5percent from "@amcharts/amcharts5/percent";
import { ThemeMonochrome } from "@servicetitan/anvil2-ext-charts/am5";
function App() {
useLayoutEffect(() => {
const data = [
{ category: "Lithuania", value: 501.9 },
{ category: "Czechia", value: 301.9 },
{ category: "Ireland", value: 201.1 },
{ category: "Germany", value: 165.8 },
];
const root = am5.Root.new("chartdiv");
root.setThemes([am5themes_Animated.new(root), ThemeMonochrome.new(root)]);
const chart = root.container.children.push(
am5percent.PieChart.new(root, {
layout: root.horizontalLayout,
innerRadius: am5.percent(50),
}),
);
const series = chart.series.push(
am5percent.PieSeries.new(root, {
name: "Series",
valueField: "value",
categoryField: "category",
legendValueText: "",
}),
);
// Display percentage labels on slices
series.labels.template.set(
"text",
"{valuePercentTotal.formatNumber('#.')}%",
);
series.data.setAll(data);
return () => root.dispose();
}, []);
return ;
}
export default App;
```
### Switching themes
To use a different Anvil2 theme, swap the import:
```tsx theme={null}
// 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:
```tsx theme={null}
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:
| Module | Import | Chart types |
| ----------- | ------------------------------------- | ----------------------------------------------------------- |
| **Core** | `@amcharts/amcharts5` | Root, Legend, Tooltip, Label, ColorSet |
| **Percent** | `@amcharts/amcharts5/percent` | PieChart, PieSeries (donut/pie charts) |
| **XY** | `@amcharts/amcharts5/xy` | XYChart, ColumnSeries, CategoryAxis, ValueAxis (bar charts) |
| **Themes** | `@amcharts/amcharts5/themes/Animated` | Built-in animation theme |
## Next steps
* [Bar Charts](/docs/extended-libraries/charts/bar-charts) — Vertical, horizontal, grouped, and stacked bar chart examples
* [Donut Charts](/docs/extended-libraries/charts/donut-charts) — Pie and donut chart examples with legends
* [Data Visualization Guidelines](/docs/web/data-visualization) — Design guidelines for color palettes, variable ordering, and chart anatomy
* [amCharts 5 Documentation](https://www.amcharts.com/docs/v5/) — Full amCharts 5 reference
