> ## 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 – React Native

> Build Anvil2 charts for React Native with Apache ECharts.

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

## Installation

Install the kit and its peer dependencies:

```bash theme={null}
pnpm add @servicetitan/anvil2-rn-charts-kit @wuba/react-native-echarts echarts react-native-svg zrender
```

Wrap the Metro configuration with `withAnvil2Charts`:

```js theme={null}
const {
  withAnvil2Charts,
} = require("@servicetitan/anvil2-rn-charts-kit/metro");

module.exports = withAnvil2Charts(config);
```

## Implementation

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

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

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

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

## Accessibility

Chart hides the drawing surface and the tooltip overlay from assistive technology, then exposes the same values as a visually hidden data list. VoiceOver and TalkBack read that list instead of the graphic.

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

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

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

Each value in that list is a button that controls selection. Set `onDataPointClick` when the product also needs an activation callback. The drawing surface stays hidden from assistive technology. The callback is not supported when there is no list.

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.