> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Charts

> Anvil2 themes for amCharts 5 data visualization, providing consistent color palettes and styling for bar charts and donut charts.

The Charts extended library provides [amCharts 5](https://www.amcharts.com/docs/v5/) 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.

<Note>
  For design guidelines on color palettes, variable ordering, and chart anatomy, see the [Data Visualization design guidelines](/docs/web/data-visualization).
</Note>

## Installation

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

```bash theme={null}
npm install @servicetitan/anvil2-ext-charts @amcharts/amcharts5
```

## Import

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

```tsx theme={null}
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](/docs/web/data-visualization/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](/docs/web/data-visualization) 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](/docs/extended-libraries/charts/bar-charts) (vertical, horizontal, grouped, stacked)
* [Donut charts](/docs/extended-libraries/charts/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