# React Charts

> Browse composable React chart components built on Apache ECharts, including line, bar, area, pie, scatter, and heatmap charts.

Source: https://www.honestui.com/docs/charts

Honest UI charts are composable React chart components built on [Apache ECharts](https://echarts.apache.org/). Install them from `honestui/charts`, then compose the axes, series, legend, tooltip, and controls your visualization needs.

Charts are package imports rather than CLI-copied UI components. You can inspect their source in the Honest UI repository and use ECharts options when the component API does not expose a setting directly.

## Choose a chart [#choose-a-chart]

| Chart                                               | Use it to                                                               | Use something else when                                           |
| --------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------- |
| [Area chart](/docs/charts/area-chart/static)        | Show change over time when magnitude or contribution to a total matters | A filled area would make close comparisons harder                 |
| [Bar chart](/docs/charts/bar-chart/static)          | Compare values across categories                                        | The primary question is change over a continuous sequence         |
| [Line chart](/docs/charts/line-chart/static)        | Show trends and rate of change across an ordered dimension              | The data is unordered or category comparison matters more         |
| [Pie or donut chart](/docs/charts/pie-chart/static) | Show a simple part-to-whole relationship with a few categories          | Values are close, there are many categories, or precision matters |
| [Scatter chart](/docs/charts/scatter-chart/static)  | Find relationships, clusters, and outliers across numeric measures      | One axis is categorical                                           |
| [Heatmap](/docs/charts/heatmap/static)              | Find patterns across two categorical dimensions                         | Readers need frequent point-by-point comparison                   |

## How composition works [#how-composition-works]

The chart root owns the data, theme configuration, loading state, and selection. Add only the parts you need. For example:

```tsx
<BarChart data={data} config={chartConfig}>
  <BarChart.Grid />
  <BarChart.XAxis dataKey="month" />
  <BarChart.Legend />
  <BarChart.Tooltip />
  <BarChart.Bar dataKey="completed" />
</BarChart>
```

The child components describe ECharts configuration; they do not render separate DOM elements. Omitting a child removes that chart part. Use [Chart Config](/docs/charts/chart-config) to connect data keys to visible labels, colors, and optional icons.

## Canvas and performance [#canvas-and-performance]

ECharts renders the plot to canvas, avoiding one DOM element for every bar, point, or cell. That can reduce DOM size for dense visualizations, but performance still depends on the dataset, enabled interactions, animation, device, and surrounding application. Test representative data on the devices your product supports.

## Accessibility responsibilities [#accessibility-responsibilities]

A canvas can have an accessible name, but that name does not expose every plotted value or relationship. Provide a nearby summary or data table when people need to understand exact values, trends, outliers, or selections.

Tooltips, brushes, and direct mark selection are pointer-operated unless your application supplies an equivalent control. Do not place required information or the only path to an action inside a canvas interaction.

## Get started [#get-started]

Follow [Installation](/docs/charts/installation), define labels and colors in [Chart Config](/docs/charts/chart-config), and choose a chart based on the question the data must answer.