Charts - React Native

The Charts React Native kit provides an Anvil2 theme, palette utilities, tooltips, and a React Native host for Apache ECharts.

Installation

Install the kit and its peer dependencies:

pnpm add @servicetitan/anvil2-rn-charts-kit @wuba/react-native-echarts echarts react-native-svg zrender

Wrap the Metro configuration with withAnvil2Charts:

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

module.exports = withAnvil2Charts(config);

Implementation

Chart component

Configure the Chart component, tooltips, themes, and palette utilities.

Chart types

View examples for bar, line, area, donut, and combined charts.

Palettes

Apply categorical, monochrome, and semantic chart palettes.

Package source

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.

<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. When onDataPointClick is set, each value in that list is a button that fires the same callback. The drawing surface stays hidden from assistive technology. Omit the callback and the list stays read-only. 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

Select a chart type and review labeling and accessibility guidance.

Look and feel

Select a palette and review chart styling guidance.

​Installation

​Implementation