Free React chart libraries and collections, compared honestly
For most React dashboards the default free choice is Recharts, or shadcn/ui’s charts, which wrap it. Apache ECharts and Nivo cover far more chart types, visx and D3 give full control if you draw the chart yourself, and Lightweight Charts is built for trading screens. Copy-in collections such as mebius.design’s 62 free chart cards are finished, animated cards rather than libraries. The right pick depends on whether you need an engine or a finished component.
Charting libraries
You pass data and options; the library draws the chart.
Recharts (MIT, SVG). React components for line, area, bar, pie, radar, radial bar, scatter, funnel, Sankey and treemap charts, composed like JSX. The common default. SVG gets slow with many thousands of points, and there is no candlestick series.
Apache ECharts (Apache 2.0, canvas or SVG). The widest set of chart types, including candlestick, gauge, Sankey, heatmap and maps, and it handles large datasets. You configure it with one options object through a wrapper such as echarts-for-react, not with React components, and it is heavy unless you import only the charts you use.
Nivo (MIT, built on D3). Many chart types with good defaults (Sankey, funnel, bump, calendar, chord), with SVG, canvas or HTML renderers for several of them. Styling follows Nivo’s theme object rather than Tailwind.
visx (MIT, from Airbnb). Low-level pieces (scales, shapes, axes, tooltips) for building your own charts in React. Total control and a small bundle, but every chart is yours to write.
Chart.js with react-chartjs-2 (MIT, canvas). Quick to set up and fast to draw; customising tooltips and legends happens in Chart.js options and plugins, outside React.
Lightweight Charts (Apache 2.0, canvas, from TradingView). Price charts for trading: candles, bars, areas and volume with panning, zooming and real-time updates. Its licence asks for an attribution notice.
Copy-in charts
Finished components whose code you own.
shadcn/ui charts (MIT). Recharts examples wired to your CSS variables, copied into your project: area, bar, line, pie, radar and radial charts plus a tooltip. They look like the rest of shadcn/ui and inherit Recharts’ limits.
Tremor (Apache 2.0). Tailwind-styled dashboard components, with charts built on Recharts.
mebius.design free charts. 62 chart cards designed in Figma and coded in React + Tailwind v4, each animated with anime.js and installed from a shadcn registry. They include the types shadcn/ui leaves out: candlestick, gauge, Sankey and timeline charts. Each card is a whole card (title, figures, switches, chart) with its own drawing code, and a Figma file comes with it.
- What they don’t do: they aren’t a general engine. Each card has one design (the Keitoto library’s light theme), and changing the look means editing its Tailwind classes.
- They need React 19 and Tailwind v4. Ten of them are in the open starter pack (MIT, installed from their URL with no account); the rest need a free mebius.design account.
- The starter items are MIT; the others are free to use in your projects under the mebius.design licence.
How to choose
- A few standard charts in a shadcn app: shadcn/ui charts.
- Many chart types or large datasets: ECharts.
- A chart nobody has built: visx, or D3 directly.
- A trading view people interact with all day: Lightweight Charts.
- Finished dashboard cards with motion, matched to a Figma file: a copy-in collection such as the mebius charts. Mixing is fine: a card from a collection next to a Recharts chart costs nothing.
Check the licence of every chart you copy
MIT and Apache 2.0 allow commercial use; Apache 2.0 asks you to keep its notices. Collections and marketplaces set their own terms per item.
Related
Item pages, kits and guides this guide uses.