> ## 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 – Web

> Build Anvil2 charts for React with Apache ECharts.

The Charts React kit provides an Anvil2 theme, palette utilities, tooltips, and a React host for [Apache ECharts](https://echarts.apache.org/).

## Installation

Install the kit and its ECharts peer dependency:

```bash theme={null}
pnpm add @servicetitan/anvil2-charts-kit echarts
```

Import the chart styles once in the application:

```tsx theme={null}
import "@servicetitan/anvil2-charts-kit/styles.css";
```

## Implementation

> **[Chart component](https://anvil.servicetitan.com/docs/charts/web/chart.md)**
>
> Configure the `Chart` component, tooltips, themes, and palette utilities.

> **[Chart types](https://anvil.servicetitan.com/docs/charts/web/bar.md)**
>
> View examples for bar, line, area, donut, and combined charts.

> **[Palettes](https://anvil.servicetitan.com/docs/charts/web/palettes)**
>
> Apply categorical, monochrome, and semantic chart palettes.

> **[Package source](https://github.com/servicetitan/hammer/tree/main/packages/anvil2-charts-kit)**
>
> View the package source and README.

## Accessibility

Chart hides the plot and the tooltip overlay from assistive technology, then exposes the same values as a visually hidden data table. Screen reader users read that table instead of navigating the SVG.

Set `accessibilityLabel` on every chart to caption the table. Charts fall back to `option.title.text`, then `"Chart"`, when the prop is omitted.

```tsx theme={null}
<Chart option={option} accessibilityLabel="Bar chart. Sales by region." />
```

The table comes from the chart option. Bar, line, and area series on a category axis each become a column, and pie or donut data becomes one row per slice. Options that define data indirectly, such as `dataset` transforms, produce no table and announce the accessible label or the generic `"Chart"` label.

Value cells in that table are the keyboard and screen-reader selection surface. Set `onDataPointClick` when the product also needs an activation callback. The plot stays visual-only and is not in the tab order. The callback is not supported when there is no table.

Charts render without ECharts animation, so nothing animates on load.

## Design guidance

Review the data visualization guidance before implementation:

> **[Data visualization](https://anvil.servicetitan.com/docs/data-visualization)**
>
> Select a chart type and review labeling and accessibility guidance.

> **[Look and feel](https://anvil.servicetitan.com/docs/data-visualization/look-and-feel.md)**
>
> Select a palette and review chart styling guidance.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.