Skip to main content
The Charts React kit provides an Anvil2 theme, palette utilities, tooltips, and a React host for Apache ECharts.

​
Installation

Install the kit and its ECharts peer dependency:
Import the chart styles once in the application:

​
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 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.
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. When onDataPointClick is set, value cells in that table become the keyboard and screen-reader activation surface for the same callback. The plot stays visual-only and is not in the tab order. Omit the callback and the table stays read-only, so Tab skips the chart. 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

Select a chart type and review labeling and accessibility guidance.

Look and feel

Select a palette and review chart styling guidance.
Last modified on August 28, 2026