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

<Columns cols={2}>
  <Card title="Chart component" icon="chart-column" href="/docs/kits/charts-react-native/chart">
    Configure the `Chart` component, tooltips, themes, and palette utilities.
  </Card>

  <Card title="Chart types" icon="chart-line" href="/docs/kits/charts-react-native/bar">
    View examples for bar, line, area, donut, and combined charts.
  </Card>

  <Card title="Palettes" icon="palette" href="/docs/kits/charts-react-native/palettes">
    Apply categorical, monochrome, and semantic chart palettes.
  </Card>

  <Card title="Package source" icon="github" href="https://github.com/servicetitan/hammer/tree/main/packages/anvil2-rn-charts-kit">
    View the package source and README.
  </Card>
</Columns>

## Design guidance

Review the data visualization guidance before implementation:

<Columns cols={2}>
  <Card title="Data visualization" icon="chart-simple" href="/docs/web/data-visualization">
    Select a chart type and review labeling and accessibility guidance.
  </Card>

  <Card title="Look and feel" icon="swatchbook" href="/docs/web/data-visualization/look-and-feel">
    Select a palette and review chart styling guidance.
  </Card>
</Columns>