Skip to documentation content
|

React Charts

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

Honest UI charts are composable React chart components built on Apache ECharts. 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
ChartUse it toUse something else when
Area chartShow change over time when magnitude or contribution to a total mattersA filled area would make close comparisons harder
Bar chartCompare values across categoriesThe primary question is change over a continuous sequence
Line chartShow trends and rate of change across an ordered dimensionThe data is unordered or category comparison matters more
Pie or donut chartShow a simple part-to-whole relationship with a few categoriesValues are close, there are many categories, or precision matters
Scatter chartFind relationships, clusters, and outliers across numeric measuresOne axis is categorical
HeatmapFind patterns across two categorical dimensionsReaders need frequent point-by-point comparison

How composition works

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

<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 to connect data keys to visible labels, colors, and optional icons.

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

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

Follow Installation, define labels and colors in Chart Config, and choose a chart based on the question the data must answer.