TanStack Charts draws from a chart definition: marks, scales and a tooltip. The kit's Chart paints it with your theme's chart colors, grid, axes and tooltip, in light and dark mode, compact mode and inside a ThemeScope.
The kit themes three chart libraries: TanStack Charts, Recharts and ECharts. All three take the same palette props and the same chart colors, so they look alike on a page. They differ in how you write a chart, what they draw with, and what they give you for free. This page helps you pick one.
At a glance
Chart libraries
Rendering
SVG keeps every mark in the page: it scales cleanly, prints well, and screen readers and browser tools can reach it. Canvas paints pixels, which stays fast with tens of thousands of marks.
TanStack Charts draws SVG by default. CanvasChart takes the same definition and draws on a canvas when there are too many marks for SVG.
Recharts draws SVG only.
ECharts draws on a canvas by default. Pass renderer="svg" to EChart for SVG.
Bundle size
TanStack Charts is the smallest. Its own comparison, for line, bar, area and scatter charts, puts it at about 45 kB gzipped, against about 160 kB for Recharts (with React) and for ECharts. TanStack splits scales, motion, brush and zoom into separate imports, so a chart pays only for what it uses.
The kit's EChart imports all of ECharts, so every chart type ships at once. Pick ECharts when you need its catalog, not for one small chart.
Chart coverage
TanStack Charts: bar, line, area, stacked, scatter, pie, radar, radial, polar, distributions, heatmaps, financial, networks and maps. Anything else can be built from its marks.
Recharts: bar, line, area, composed, scatter, pie, radar, radial bar, treemap, sunburst, sankey and funnel. Charts outside that set take custom shapes.
ECharts: the common charts and hierarchies, plus gauges, candlesticks, calendars, graphs, chords, parallel coordinates, pictorial bars, geographic maps and custom series. It has the widest catalog of the three.
Interaction
TanStack Charts: tooltips, focus, crosshairs, selection, brush, zoom and an interactive legend, all driven by the same focus model for pointer and keyboard.
Recharts: a tooltip, a legend, a Brush for a range, and event props on each series. Synchronized charts share one tooltip position.
ECharts: tooltips, a legend that toggles series, data zoom, brush selection and a toolbox, with events through onEvents. All of it is pointer only.
Accessibility
TanStack Charts does the most for you. It requires a label, moves through the marks with the keyboard, announces the tooltip and respects reduced motion.
Recharts takes focus and moves the tooltip with Left and Right by default, and turns animation off under reduced motion. You add the name.
ECharts does nothing by default. aria adds a name and a generated description, and decal patterns for color. There is no keyboard access to the data, so add a table.
The Accessibility guideline lists what each library gives and what you add.
Learning curve
Recharts is the quickest start for a React developer: a chart is JSX, one component per axis and per series.
ECharts is one large option object. A standard chart takes a few lines, but the options run deep, and its example gallery is where you find them.
TanStack Charts asks you to learn a few ideas first: marks, scales and channels. Once you know them, a new chart type is a new mark rather than a new component.
Which one to pick
TanStack Charts, the default: for most product charts, for charts that need keyboard access, and for custom charts built from parts.
Recharts: when your team already writes Recharts, or the charts are standard and you want them as plain React components.
ECharts: when you need a chart the other two do not have, such as a gauge, a calendar or a geographic map, or a very large data set on canvas.
Mixing libraries
You can use more than one in an app, and the charts still match: the three read the same chart colors and take the same palette, color and emphasis props. Each library adds to the bundle, so keep a second one to the pages that need it.