React Data Visualization Libraries for Charts and Maps
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.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
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.
How to Choose: victory vs react-simple-maps vs react-vis vs recharts
- 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:
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.
Popular Comparisons
README for victory
Victory Documentation
Getting started
- Add Victory to your project:
$ npm install victory --save
- Add your first Victory component:
import React, { Component } from "react";
import { render } from "react-dom";
import { VictoryPie } from "victory";
class PieChart extends Component {
render() {
return <VictoryPie />;
}
}
render(<PieChart />, document.getElementById("app"));
VictoryPiecomponent will be rendered, and you should see:
For detailed documentation and examples please see Victory Documentation
Requirements
Projects using Victory should also depend on React and prop-types.
Victory Native
Want to use Victory with React Native? Check out victory-native-xl
If you would like to use this version of Victory with React Native, you can install the legacy version using the legacy npm tag. See the available versions in npm.