react-simple-maps, react-vis, recharts, and victory are React-based data visualization libraries that help developers render charts, graphs, and geographic maps. Each targets slightly different use cases: react-simple-maps specializes in SVG-based geographic visualizations using TopoJSON; react-vis (now deprecated) offered a suite of chart types with a focus on performance and customization; recharts provides a declarative, component-driven API built on D3 primitives; and victory delivers a consistent, responsive charting system with strong theming and animation support across web and React Native.
React Charting & Mapping Libraries Compared: react-simple-maps, react-vis, recharts, victory
Choosing the right data visualization library in React depends heavily on whether you’re building charts, maps, or both — and what trade-offs you’re willing to make around maintenance, flexibility, and platform support. Let’s cut through the noise and compare these four options based on real engineering concerns.
⚠️ Maintenance Status: One Is Dead
Before diving into features, address the elephant in the room: react-vis is deprecated. Uber, its original maintainer, archived the repository in 2023 and marked the npm package as unmaintained. This means:
- No bug fixes or React 18+ compatibility guarantees
- Security vulnerabilities won’t be patched
- Community support has largely moved on
Verdict: Do not start new projects with
react-vis. If you’re maintaining an old codebase using it, plan a migration torechartsorvictory.
The other three packages (react-simple-maps, recharts, victory) are actively maintained as of mid-2024, with recent commits and releases.
🗺️ Geographic Maps vs General Charts
Not all visualization libraries do everything. Here’s where each shines:
react-simple-maps: Only does maps (SVG + TopoJSON). No bar charts, no line graphs.recharts: Only does charts (bar, line, area, pie, scatter, radar, etc.). No map support.victory: Only does charts (similar types to Recharts). No native map components.react-vis(deprecated): Did charts only.
If your app needs both maps and charts, you’ll likely combine react-simple-maps with either recharts or victory.
Rendering a World Map
Only react-simple-maps handles this natively:
// react-simple-maps
import { ComposableMap, Geographies, Geography } from "react-simple-maps";
import world from "./world.json"; // TopoJSON file
function WorldMap() {
return (
<ComposableMap>
<Geographies geography={world}>
{({ geographies }) =>
geographies.map(geo => (
<Geography key={geo.rsmKey} geography={geo} />
))
}
</Geographies>
</ComposableMap>
);
}
None of the others provide geographic rendering out of the box. You’d need to integrate D3 or another mapping solution manually.
📊 Charting Capabilities and API Style
When it comes to charts, recharts and victory take different approaches to composition and data handling.
Declarative Composition: Recharts’ Strength
recharts uses a nested, component-based API that mirrors SVG structure. This makes it intuitive for React developers:
// recharts
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts";
const data = [{ name: "Jan", uv: 400 }, { name: "Feb", uv: 300 }];
function MyChart() {
return (
<LineChart width={500} height={300} data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YArray />
<Tooltip />
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
</LineChart>
);
}
Each visual element is its own component. You compose them like Lego blocks. This is great for readability and conditional rendering (e.g., show/hide grid based on a prop).
Functional Props and Automatic Scaling: Victory’s Edge
victory uses a more functional style, where you pass data and configuration as props. It handles axis scaling, domain calculation, and responsiveness automatically:
// victory
import { VictoryLine, VictoryChart, VictoryAxis } from "victory";
const data = [{ x: "Jan", y: 400 }, { x: "Feb", y: 300 }];
function MyChart() {
return (
<VictoryChart>
<VictoryAxis />
<VictoryAxis dependentAxis />
<VictoryLine data={data} />
</VictoryChart>
);
}
Notice you don’t specify width/height explicitly — VictoryChart is responsive by default. Also, data uses {x, y} format, which is consistent across all chart types.
What About react-vis? (Deprecated Example)
For historical context, here’s how react-vis did it:
// react-vis (DO NOT USE IN NEW PROJECTS)
import { XYPlot, XAxis, YAxis, LineSeries } from "react-vis";
const data = [{ x: 1, y: 10 }, { x: 2, y: 5 }];
function MyChart() {
return (
<XYPlot width={300} height={300}>
<XAxis />
<YAxis />
<LineSeries data={data} />
</XYPlot>
);
}
It required explicit dimensions and used {x, y} data, similar to Victory. But again — avoid this in new code.
📱 Cross-Platform Support
Need to share visualization logic between web and mobile?
victory: Fully supports React Native. Same components, same props.// Works identically on web and React Native <VictoryBar data={data} />recharts: Web-only (relies on SVG, which isn’t natively supported in React Native without extra tooling).react-simple-maps: Web-only (SVG + DOM-dependent).react-vis: Was web-only and is now deprecated.
If your team maintains a shared component library across platforms, victory is the only viable choice among these.
🎨 Theming and Customization
All active libraries support theming, but with different ergonomics.
Recharts: CSS and Component Overrides
You style via CSS classes or inline styles on individual components:
<LineChart>
<Line stroke="#ff7300" strokeWidth={2} />
</LineChart>
Theming requires wrapping or passing props down — no global theme context.
Victory: Built-in Theme System
Victory includes a robust theming engine:
import { VictoryTheme } from "victory";
<VictoryChart theme={VictoryTheme.material}>
<VictoryBar data={data} />
</VictoryChart>
You can also create custom themes by modifying base theme objects, making brand consistency easier at scale.
🧪 TypeScript and Developer Experience
recharts: Excellent TypeScript support. Props are strongly typed, and autocomplete works reliably in editors.victory: Also first-class TypeScript support, with generic types for data shapes.react-simple-maps: Good TypeScript coverage, though less extensive due to narrower scope.react-vis: Had TS support, but it’s frozen in time.
All active libraries offer good DX with hot reloading and clear error messages.
📐 Real-World Trade-Offs Summary
| Concern | react-simple-maps | recharts | victory |
|---|---|---|---|
| Use Case | Geographic maps only | Rich web charts | Responsive charts (web + RN) |
| API Style | Declarative (React) | Declarative (nested) | Functional props |
| Responsiveness | Manual (via container) | Requires wrapper | Built-in |
| Cross-Platform | Web only | Web only | ✅ Web + React Native |
| Theming | Limited (CSS) | Component-level styles | Full theme system |
| Learning Curve | Low (if you know TopoJSON) | Medium | Low–Medium |
💡 When to Use Which
- Building a sales dashboard with regional heatmaps? → Combine
react-simple-maps(for the map) +recharts(for trend lines and KPIs). - Creating a mobile-first analytics app that runs on iOS, Android, and web? → Go with
victoryfor all charts. - Need pixel-perfect, highly customized financial charts on the web? →
rechartsgives you the granular control you need. - Maintaining a legacy Uber-built app with
react-vis? → Start refactoring towardrecharts; the mental model is closest.
🔚 Final Thought
These libraries solve overlapping but distinct problems. Don’t force one to do what it wasn’t designed for. Use the right tool for the job — and never start fresh with a deprecated package like react-vis. For most modern React teams, the safe, future-proof choices are recharts for web-only charting, victory for cross-platform, and react-simple-maps when geography is central to your data story.
- recharts:
Choose
rechartswhen you need a rich set of responsive, customizable charts (line, bar, area, pie, radar, etc.) with a clean, declarative React API. It’s ideal for dashboard applications where composition, accessibility, and integration with TypeScript matter. Its tight coupling to SVG and D3 under the hood gives fine control without exposing D3’s complexity directly. - victory:
Choose
victorywhen you require consistent charting behavior across both web and React Native, or when theming, animations, and automatic responsiveness are top priorities. Its functional approach to data and props makes it predictable, and it handles edge cases like axis scaling gracefully. It’s well-suited for product UIs needing polished, branded visualizations with minimal boilerplate. - react-simple-maps:
Choose
react-simple-mapswhen your primary need is rendering interactive geographic maps with custom regions (e.g., country-level dashboards, regional analytics). It’s lightweight, relies on TopoJSON for efficient map data, and integrates cleanly with standard React patterns. Avoid it if you need general-purpose charts like bar or line graphs — it’s strictly for maps. - react-vis:
Do not choose
react-visfor new projects. The library is officially deprecated as of 2023, with its GitHub repository archived and npm page marked as unmaintained. While it once offered high-performance, composable chart components, lack of updates means compatibility risks with modern React versions and no security patches. Migrate existing uses to alternatives likerechartsorvictory.
Recharts
Introduction
Recharts is a Redefined chart library built with React and D3.
The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:
- Simply deploy with React components.
- Native SVG support, lightweight with minimal dependencies.
- Declarative components.
Documentation at recharts.github.io and our storybook
Also see the wiki.
All development is done on the main branch. The current latest release and storybook documentation reflects what is on the release branch.
Examples
<LineChart width={400} height={400} data={data}>
<XAxis dataKey="name" />
<Tooltip />
<CartesianGrid stroke="#f5f5f5" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" />
<Line type="monotone" dataKey="pv" stroke="#387908" />
</LineChart>
All the components of Recharts are clearly separated. The LineChart is composed of x axis, tooltip, grid, and line items, and each of them is an independent React Component. The clear separation and composition of components is one of the principle Recharts follows.
Installation
npm
NPM is the easiest and fastest way to get started using Recharts. It is also the recommended installation method when building single-page applications (SPAs). It pairs nicely with a CommonJS module bundler such as Webpack.
# latest stable
$ npm install recharts react-is
react-is needs to match the version of your installed react package.
umd
The UMD build is also available on unpkg.com:
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-is/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
Then you can find the library on window.Recharts.
Contributing
Recharts is open source. If you want to contribute to the project, please read the CONTRIBUTING.md to understand how to contribute to the project and DEVELOPING.md to set up your development environment.
Thanks
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.
Thanks to JetBrains for providing OSS development license for their IDEs.
Browser testing via 
License
Copyright (c) 2015-2024 Recharts Group.