Charts - Anvil2

The Charts extended library provides amCharts 5 themes that apply Anvil2 design tokens to bar charts and donut charts. These themes are narrow in scope — they style specific chart types rather than acting as general-purpose amCharts themes. Additional chart types will be supported in future releases.

For design guidelines on color palettes, variable ordering, and chart anatomy, see the Data Visualization design guidelines.

Installation

The Charts library requires @amcharts/amcharts5 as a peer dependency.

npm install @servicetitan/anvil2-ext-charts @amcharts/amcharts5

Import

All themes are available from the @servicetitan/anvil2-ext-charts/am5 entry point.

import {
  ThemeCategorical,
  ThemeMonochrome,
  ThemeSemantic,
} from "@servicetitan/anvil2-ext-charts/am5";

Themes

The library provides three themes, each suited to different data visualization scenarios.

Theme	Use case	Color order
Monochrome	Data with a natural order or progression (e.g., volume, intensity, time). Default for charts with 4 or fewer variables.	Shades of a single hue
Categorical	Displaying 5–9 distinct, unrelated categories. Group additional categories into “Other”. See Categorical Color Palette for details.	Distinct hues for maximum differentiation
Semantic	Status-based data showing positive, negative, and neutral values (e.g., deviation from a target). The design guidelines recommend this palette primarily for bar charts.	Success, Neutral, Warning, Danger

Each theme configures the following for bar and donut charts:

Color palettes derived from Anvil2 design tokens
Fill patterns
Stroke colors for contrast
Tooltips
Rounded corners
Hover dimming
Pointer cursor on interactive elements
Nunito Sans font family

Supported chart types

The themes include specific styling rules for these amCharts 5 chart types:

Bar charts (vertical, horizontal, grouped, stacked)
Donut charts (pie/donut with legend)

Additional amCharts 5 chart types are planned for future releases.

Dependencies

@amcharts/amcharts5 ^5 - charting library (peer dependency)
@servicetitan/hammer-token - design tokens for color palettes
React ^18 || ^19

Last modified on July 24, 2026

Getting Started

⌘I

​Installation

​Import

​Themes

​Supported chart types

​Dependencies

Installation

Import

Themes

Supported chart types

Dependencies