Recharts vs Apache ECharts vs Visx: Which React Chart Library to Pick

recharts/recharts is a composable React chart library built on top of D3 scales and SVG. You write JSX like <LineChart width={600} height={300} data={data}><XAxis dataKey="name" /><YAxis /><Tooltip /><Line dataKey="uv" stroke="#8884d8" /></LineChart> and Recharts handles the math. Every element is a real React component, so you customize by passing children and props rather than reaching into a config object or imperative API.

Recharts has three real strengths. First, the declarative JSX API matches how React developers already think, so onboarding a new engineer takes minutes. Second, <ResponsiveContainer> makes responsive charts trivial — a persistent pain point in other libraries. Third, the composition model lets you drop custom SVG like reference lines, brushes, or gradients next to built-in series. The weaknesses are real too: animations can get janky with thousands of points because everything renders as SVG, the styling is clearly from an older design era and usually needs theme overrides, and very custom chart types (chord diagrams, sankeys, network graphs) are outside its scope.

Pick recharts/recharts when you're building a standard product dashboard with line, bar, area, pie, or scatter charts and you want to ship this week. Switch to airbnb/visx if you outgrow the built-in chart types, or to apache/echarts if you need canvas-level performance on tens of thousands of points.

airbnb/visx is a low-level collection of React components wrapping D3 primitives. Instead of <LineChart>, you compose <Group>, <LinePath>, <AxisBottom>, <Scale>, and <Tooltip> yourself — e.g. <svg><Group><LinePath data={data} x={d => xScale(d.x)} y={d => yScale(d.y)} stroke="#000" /></Group></svg>. Airbnb built it specifically because high-level chart libraries forced tradeoffs their data viz team wasn't willing to make. Each package (@visx/scale, @visx/axis, @visx/shape) is independently installable.

visx's strengths are control and bundle size. You only import the primitives you use, so a simple chart can ship in a few KB, and there's effectively no limit on what you can build — network graphs, streamgraphs, annotated dashboards, financial chart overlays. Because it's just React + SVG with D3 math, integrating with your existing design system is trivial. The downsides: you write a lot more code than with Recharts, you need working knowledge of D3 scales and data joins, and basic features like legends, tooltips, and responsive sizing are your responsibility to wire up.

Pick airbnb/visx when you're building a custom data-viz product or need pixel-level control that recharts/recharts and plouc/nivo won't give you, and your team knows D3. For standard dashboards, recharts/recharts ships faster; for enterprise-scale canvas performance, apache/echarts is the better call.

antvis/G2Plot is AntV's higher-level charting library built on top of antvis/G2. Where G2 requires you to compose a chart from primitives, G2Plot gives you ready-made chart classes: new Line(container, { data, xField: 'year', yField: 'value' }).render() produces a finished line chart with sensible defaults. It covers the common statistical chart types — line, bar, column, pie, scatter, heatmap, funnel, radar, waterfall — with a consistent config-object API.

G2Plot's strengths: the default visual design is clean and modern, ready-made chart types save the config boilerplate that raw G2 requires, and you inherit G2's canvas rendering performance on large datasets. It's a practical pick for Chinese-language product dashboards where the AntV ecosystem is mainstream. The drawbacks: it's not React-native, so you mount into a container via ref, English documentation and community examples are thinner than recharts/recharts or apache/echarts, and the config-object API still feels less React-idiomatic than JSX-based alternatives.

Pick recharts/recharts when you want the AntV look-and-feel with ready-made chart types and are comfortable mounting non-React code via refs. For a more React-native API, pick recharts/recharts; for broader chart-type coverage with similar canvas performance, apache/echarts; for raw grammar-of-graphics control, antvis/G2 directly.

plouc/nivo is a React chart library built on D3 with opinionated, beautiful defaults. You install @nivo/line or @nivo/bar as separate packages and render <ResponsiveLine data={data} margin={{...}} axisBottom={{...}} colors={{ scheme: 'nivo' }} />. Nivo ships both SVG and Canvas versions of most charts (e.g. ResponsiveLineCanvas) so you pick the renderer based on dataset size, and it has first-class support for server-side rendering and motion via react-spring.

Nivo's strengths: out-of-the-box charts look genuinely polished without any custom styling, the SVG/Canvas split gives you performance headroom without switching libraries, and chart types like calendar heatmaps, sankey, chord, and swarm plots go beyond what Recharts covers. The per-chart-type package split keeps bundle size reasonable. The tradeoffs are a larger learning curve than Recharts because every chart has dozens of config props, the theming API is verbose, and customization past a certain point means dropping down to the <ResponsiveLine> render props — less flexible than truly composable libraries like airbnb/visx.

Pick plouc/nivo when you want a broader chart-type catalog than recharts/recharts with better out-of-the-box visual design and you're willing to read more docs. Prefer recharts/recharts when JSX composition matters more than visual polish, and airbnb/visx when you need to build something Nivo doesn't ship.

observablehq/plot is a concise visualization library from the Observable team (same people behind d3/d3), implementing a layered grammar-of-graphics API. You write Plot.plot({ marks: [Plot.dot(data, { x: 'weight', y: 'height' }), Plot.linearRegressionY(data, { x: 'weight', y: 'height' })] }) and get a statistical chart with axes, scales, and transforms inferred automatically. It renders to SVG and is designed for fast exploratory analysis rather than production dashboards.

observablehq/plot's strengths: the grammar-of-graphics API lets you compose chart types by stacking "marks" (dot, line, rule, area, rect, text) with transforms (bin, group, stack, normalize) in a way that's very concise for statistical work. It's made by the D3 team so the scales and statistical primitives are first-rate, and the defaults are clean. The drawbacks for React teams: observablehq/plot is not React-aware — you mount its output via refs and effects — interactivity is limited compared to apache/echarts, and the API is newer with a smaller ecosystem of examples.

Pick observablehq/plot for exploratory data analysis, notebooks, or statistical dashboards where conciseness and statistical transforms matter most. For production React product dashboards, recharts/recharts fits the React model better; for heavy interactivity, apache/echarts.

apache/echarts is a massive charting engine maintained by the Apache Foundation, originally from Baidu. Unlike most entries here it is not React-first — you pass a giant config object like { xAxis: {...}, yAxis: {...}, series: [{ type: 'line', data: [...] }] } to echarts.init(dom).setOption(option). In React, teams usually wrap it with echarts-for-react or a small custom hook. It renders to Canvas by default with an SVG fallback, which keeps it fast on large datasets.

ECharts' strengths are its breadth and performance. It ships more chart types than any React-native competitor — sankey, graph, tree, treemap, sunburst, heatmap, boxplot, candlestick, parallel coordinates, geo maps, 3D via echarts-gl — all configured the same way. Canvas rendering stays smooth with 50k+ points where Recharts' SVG would crawl, and the built-in toolbox (zoom, brush, data view, export) is polished out of the box. Drawbacks: the config-object API feels foreign in React codebases, TypeScript types for the nested options are painful, and bundle size is heavy — a full echarts import runs several hundred KB before gzip.

Pick apache/echarts when you need a wide range of chart types or high-performance rendering of large datasets, especially for internal analytics tools where bundle size matters less. For a typical React product dashboard with a few chart types, recharts/recharts is a cleaner fit; for custom viz, airbnb/visx gives more control.

plotly/plotly.js is the JavaScript charting engine behind Plotly's Python and R libraries and Dash. You call Plotly.newPlot(div, data, layout) with data arrays and a layout config object; in React, teams use react-plotly.js as a wrapper. It renders to SVG for most 2D charts and WebGL for high-density scatter and 3D surfaces, and ships with a full interactive toolbar (zoom, pan, hover, export PNG) built in.

Plotly.js's strengths are scientific and statistical chart coverage — contour plots, 3D surfaces, ternary plots, violin plots, choropleths, financial OHLC — all with the same config shape. The WebGL renderer handles hundreds of thousands of points smoothly, and the interactivity is polished without any extra work. The weaknesses are serious for typical React apps: the full bundle is very large (a couple MB uncompressed), the config-object API feels out of place in React codebases compared to recharts/recharts' JSX, and the default styling is recognizably "Plotly" unless you override it heavily.

Pick plotly/plotly.js when you're building scientific, engineering, or statistical dashboards where 3D charts, contour plots, or WebGL scatter at scale actually matter. For a standard product dashboard, the bundle cost is hard to justify — recharts/recharts or plouc/nivo are cleaner. For custom viz, airbnb/visx wins on control.

vega/vega is a visualization grammar — a declarative JSON spec language that describes interactive charts as a dataflow graph of data, scales, marks, and signals. You install vega and pass a JSON spec to new vega.View(vega.parse(spec)).renderer('svg').initialize(container).run(). The spec is verbose but portable: every chart is a data document you can save, share, compile to SVG or Canvas, and regenerate server-side. Vega-Lite is the higher-level dialect that compiles down to full Vega specs for everyday work.

Strengths: vega/vega separates chart definition from runtime entirely, so the same spec renders in browser, Node, or Jupyter; interactive signals (selection, brushing, cross-chart linking) are first-class constructs rather than manual event code; you get full compositional control over scales, axes, and marks with data-driven encoding. Drawbacks: there is no React component — you mount a Vega view into a div and manage updates through view.data(...) and view.signal(...) imperatively; the JSON grammar has a steep learning curve; rendering a spec per chart is heavier than a handful of React <Line> elements when you just need a small dashboard.

Pick vega/vega when charts are specifications you serialize, share, or generate server-side — dashboards, notebooks, reproducible research. For a straightforward React product dashboard, pick recharts/recharts; for composable D3-style primitives inside React, pick airbnb/visx; for a friendlier grammar layered above vega/vega, observablehq/plot is the cleaner option.

mui/mui-x is the extended component suite from MUI containing Data Grid, Date Pickers, Tree View, and Charts, with the charts package (@mui/x-charts) providing React components like <LineChart>, <BarChart>, <PieChart>, and <ScatterChart>. You install @mui/x-charts and render <LineChart xAxis={[{data: [1,2,3]}]} series={[{data: [2,5,3]}]} width={500} height={300} />. The charts render SVG, respect MUI theme tokens, and share scale/axis primitives with a lower-level composition API for custom layouts.

Strengths: theme integration is automatic in mui/mui-x — palette, typography, and dark mode propagate from the MUI ThemeProvider so charts match Buttons and DataGrids without custom styling; TypeScript types are first-class and strict, with discriminated unions for series types; the library also exposes unstyled building blocks (ChartContainer, LinePlot, ChartsTooltip) for bespoke compositions. Drawbacks: chart-type coverage is narrower than mature competitors — no sankey, treemap, or 3D; some advanced features sit behind the Pro license tier; bundle size grows quickly once Data Grid and Date Pickers are also imported from the same suite.

Pick mui/mui-x when your app is already on Material UI and you want charts, grids, and pickers from one vendor with shared theming. If you don't use MUI and want a lighter standalone chart library, pick recharts/recharts instead; for heavy composition and fully custom visuals, pick airbnb/visx.

highcharts/highcharts-react is the official React wrapper for Highcharts, the long-established commercial charting library. You render <HighchartsReact highcharts={Highcharts} options={{ title: {...}, series: [...] }} /> and Highcharts handles everything under the hood. It covers virtually every 2D chart type plus stock, maps, and Gantt via separate modules, and has exceptionally polished interactivity, accessibility, and export features.

Highcharts' strengths are hard to match: the accessibility module produces WCAG-compliant charts with screen-reader narration, the stock and maps modules are industry-standard in finance and enterprise, and stability across versions is excellent — code written years ago still works. The decisive drawback is licensing: Highcharts is free only for non-commercial use and requires a paid license for commercial products, which rules it out for many teams. The config-object API is also less React-idiomatic than recharts/recharts.

Pick highcharts/highcharts-react when you have a commercial license, need specialized stock, maps, and Gantt charts, or have strict accessibility requirements. For a typical product dashboard where licensing is a blocker, pick recharts/recharts instead; for broad scientific coverage without licensing, plotly/plotly.js or apache/echarts.

plotly/react-plotly.js is a thin React wrapper around plotly/plotly.js that exposes the full Plotly chart library as a <Plot> component. You install react-plotly.js plotly.js and render <Plot data={[{x, y, type: 'scatter'}]} layout={{title: 'x'}} />. Everything is driven by data/layout/config props that mirror Plotly's JSON schema, so the component is effectively a declarative shell over an imperative engine that handles WebGL scatter, 3D surfaces, contour plots, and financial charts.

Three strengths: breadth is unmatched — plotly/react-plotly.js inherits heatmaps, 3D mesh, choropleths, candlesticks, and box plots from plotly.js without extra plugins; hover/zoom/pan/export-to-PNG come wired in by default through the Plotly modebar; WebGL traces (scattergl) render 100k+ points smoothly. Drawbacks: the bundle is heavy — a full plotly.js build is several megabytes minified, and trimming it requires switching to plotly.js-basic-dist or custom bundles; styling is theme-config JSON, not CSS, so designers can't just edit stylesheets; React integration is shallow — the wrapper re-renders by diffing props rather than through fine-grained reactivity.

Pick plotly/react-plotly.js when you need scientific or financial chart types (3D, contour, OHLC) out of the box and bundle size is acceptable. For standard product dashboards where you want a lighter React-native API, pick recharts/recharts instead; for fully custom visualization with composable primitives, pick airbnb/visx.

d3/d3 is the foundational data visualization library that most other entries here build on top of. It's a collection of modules for binding data to the DOM — d3.scaleLinear(), d3.axisBottom(), d3.line(), d3.hierarchy() — plus utilities for fetching, parsing, and transforming data. A typical D3 chart is dozens of lines of imperative code selecting SVG elements, binding data, and drawing scales manually. It's not React-native; you either render inside a useEffect with a ref or use D3's math functions from inside React components (as airbnb/visx does).

D3's strengths are unmatched: there is literally nothing you can visualize in a browser that D3 can't do, the math and layout algorithms (force, tree, pack, cluster, voronoi, geo projections) are industry-standard, and the library is rock-solid after more than a decade. The drawbacks for React teams are the classic ones — D3's direct DOM manipulation fights React's virtual DOM, so you either cede a subtree to D3 via refs or only use D3's math functions and let React render. Raw D3 also takes significantly more code than any React-native chart library.

Pick d3/d3 directly only when you're building a truly custom visualization that no higher-level library can express, and accept that you're writing imperative code. For most React teams, use airbnb/visx to get D3's math with React's rendering, or recharts/recharts for pre-built charts built on D3.

FormidableLabs/victory is a composable React chart library that renders to SVG and also ships a React Native version with the same API. You write <VictoryChart><VictoryBar data={data} x="quarter" y="earnings" /><VictoryAxis /></VictoryChart>, and Victory handles layout, axes, and animations. The composition model is similar to Recharts but with more emphasis on reusable theme objects and shared animation primitives.

Victory's real strength is cross-platform support: the same chart code works in a web app and a React Native mobile app via victory-native, which is uncommon in this space. The theming API is clean — you define a theme object once and apply it everywhere — and animations via VictoryAnimation are smoother than most SVG competitors. Drawbacks: the default charts look dated compared to plouc/nivo or apexcharts/react-apexcharts, performance on large datasets is worse than apache/echarts because everything is SVG, and recent maintenance velocity has slowed noticeably.

Pick FormidableLabs/victory when you need the same chart code running in both a React web app and a React Native app. For web-only projects, recharts/recharts has a larger community and lighter API, and plouc/nivo looks better out of the box. For heavy datasets, apache/echarts is the right call.

uber/react-vis is Uber's React chart library, built around composable components like <XYPlot>, <LineSeries>, <XAxis>, and <YAxis>. A typical chart is <XYPlot width={300} height={300}><LineSeries data={[{x:1,y:10},...]} /><XAxis /></XYPlot>. It covers the common 2D chart types — line, bar, area, scatter, hex heatmaps, radial — with SVG rendering and a fairly minimal API surface.

Uber/react-vis's advantages are a compact, predictable API that's easy to learn and a chart set that covers most dashboard needs without a lot of configuration boilerplate. It was one of the earlier React-native chart libraries and has a straightforward composition model. The serious drawback is maintenance: active development has essentially stopped, there are known open issues with no resolution, and the default styling feels dated. For new projects in 2026, picking react-vis means betting on a library that's effectively frozen.

Pick uber/react-vis only if you're already using it in an existing codebase and migration isn't worth it. For any new React project, pick recharts/recharts instead — similar composition model, far more active development. For better visuals, plouc/nivo; for control, airbnb/visx.

tremorlabs/tremor is a copy-and-paste component set for building analytics dashboards, built on Tailwind CSS and Radix primitives with recharts/recharts under the hood for visualizations. Instead of installing a single package, you run the Tremor CLI to copy TSX sources into your repo — components like <AreaChart>, <BarChart>, <DonutChart>, <Metric>, <Card>, and <KpiCard> live in your own components/ folder so you edit them directly. Typical usage is <AreaChart data={sales} index="date" categories={["revenue"]} />.

Strengths: the dashboard-first component palette in tremorlabs/tremor includes KPI tiles, trend deltas, category bars, and filter controls that go beyond raw charts, so you don't assemble cards from scratch; because everything is Tailwind classes in your own files, customizing colors or spacing is direct text editing, not theme-config wrangling; the copy-paste model means no version upgrades fighting your fork. Drawbacks: it is Tailwind-only — it won't fit a CSS Modules or Emotion codebase cleanly; chart types are limited to what Recharts supports, so no sankey, 3D, or heavy scientific visuals; copy-paste means you carry the maintenance burden for any bugs you discover.

Pick tremorlabs/tremor when you're building an internal analytics dashboard on Tailwind and want pre-built KPI cards plus charts sharing one aesthetic. If you want a plain React chart library without Tailwind coupling, pick recharts/recharts — which Tremor wraps anyway; for fully custom chart composition, pick airbnb/visx.

ant-design/ant-design-charts is a React binding for AntV's G2/G2Plot/G6 engines, exposing chart types as declarative components that fit the Ant Design visual language. You install @ant-design/charts and render <Line data={data} xField="year" yField="value" /> or <Pie data={data} angleField="value" colorField="type" />. Under the hood each component instantiates a G2Plot chart, wires data/field/encoding props to the imperative API, and handles mount/update/unmount lifecycle for you.

Strengths: ant-design/ant-design-charts ships many pre-styled chart types including sankey, sunburst, and relation graphs that Ant Design dashboards typically need; defaults produce polished output that matches antd Tables and Cards without extra theming; it bundles graph visualizations (via antvis/G2 and friends) and maps in addition to plots, so one dependency covers Chart + Graph + Map. Drawbacks: the library is tightly bound to the AntV aesthetic — escaping the default look requires deep config overrides; English docs lag behind Chinese ones and some options are only described upstream in antvis/G2; the imperative-engine-wrapped-in-React pattern means refs and updates can feel unidiomatic compared to a native React component tree.

Pick ant-design/ant-design-charts when your app already uses Ant Design and you want charts that match without theming work. If you want a pure React component library with smaller surface area and better English docs, pick recharts/recharts; if you want the underlying grammar directly for custom compositions, use antvis/G2.

reaviz/reaviz is a React-first chart library built with TypeScript and focused on animations and composition. You write <LineChart width={350} height={250} data={data} /> for quick charts or compose with <LineSeries>, <Line>, <Gridline>, <LinearAxis> for more control. It leans on framer-motion for animations and exposes a reasonably complete set of 2D charts plus some specialty types like sankey and radial.

reaviz's strengths are the animation polish — transitions and mount animations feel smoother than most SVG competitors — full TypeScript definitions, and a genuinely composable API that sits between recharts/recharts (high-level) and airbnb/visx (low-level primitives). The main drawbacks are smaller community size compared to recharts/recharts or apache/echarts, which means fewer Stack Overflow answers and third-party examples, and the documentation, while improving, lags behind the larger libraries. Long-term maintenance risk is higher than mainstream picks.

Pick reaviz/reaviz when animation quality and TypeScript ergonomics matter more than community size, and you like its composition style. For safer community support, pick recharts/recharts; for polished default visuals, plouc/nivo or recharts/recharts; for low-level control, airbnb/visx.