Skip to main content
Bar charts use the amCharts 5 XYChart and ColumnSeries classes. All three Anvil2 themes apply design-token-based colors and chart styling automatically.
For design guidelines on bar charts, see Bar Charts design guidelines.

​
Vertical bar chart

A basic vertical bar chart uses a CategoryAxis on the x-axis and a ValueAxis on the y-axis.

​
Horizontal bar chart

To create a horizontal bar chart, swap the axes: use a CategoryAxis on the y-axis and a ValueAxis on the x-axis. Set categoryYField and valueXField on the series instead of categoryXField and valueYField. The theme detects horizontal orientation when categoryYField or valueXField is set on the series.

​
Grouped bar chart

Grouped bar charts display multiple series side by side for each category. Create a separate ColumnSeries for each data group.

​
Stacked bar chart

Stacked bar charts show how parts contribute to a whole. Set stacked: true on each ColumnSeries.

​
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 series 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 bars to meet accessibility requirements.

​
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: 
series.columns.template.set("tooltipText", "{categoryX}: {valueY}");
Last modified on March 12, 2026