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

> 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

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

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

  <Card title="Palettes" icon="palette" href="/docs/kits/charts-react/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-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>