Top Related Projects
Simple HTML5 Charts using the <canvas> tag
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
📊 Interactive JavaScript Charts built on SVG
Highcharts JS, the JavaScript charting framework
JavaScript 3D Library.
Quick Overview
Recharts is a composable charting library built on React components. It provides a wide range of chart types and customization options, making it easy to create responsive and interactive charts for web applications. Recharts leverages the power of SVG to render charts, ensuring high-quality visuals across different devices and screen sizes.
Pros
- Easy to use and integrate with React applications
- Highly customizable with a wide range of chart types and options
- Responsive design that adapts to different screen sizes
- Good performance due to optimized rendering and updates
Cons
- Limited animation capabilities compared to some other charting libraries
- Documentation can be unclear or incomplete in some areas
- Some advanced features may require workarounds or custom implementations
- Learning curve for complex customizations
Code Examples
- Creating a simple line chart:
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
const data = [
{ name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
{ name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
{ name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
];
const SimpleLineChart = () => (
<LineChart width={600} height={300} data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
);
- Creating a customized pie chart:
import { PieChart, Pie, Cell, Tooltip } from 'recharts';
const data = [
{ name: 'Group A', value: 400 },
{ name: 'Group B', value: 300 },
{ name: 'Group C', value: 300 },
{ name: 'Group D', value: 200 },
];
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
const CustomizedPieChart = () => (
<PieChart width={400} height={400}>
<Pie
data={data}
cx={200}
cy={200}
labelLine={false}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
</PieChart>
);
- Creating a responsive bar chart:
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
const data = [
{ name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
{ name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
{ name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
];
const ResponsiveBarChart = () => (
<ResponsiveContainer width="100%" height={300}>
<BarChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="pv" fill="#8884d8" />
<Bar dataKey="uv" fill="#82ca9d" />
</BarChart>
Competitor Comparisons
Simple HTML5 Charts using the <canvas> tag
Pros of Chart.js
- Lightweight and fast, with a smaller bundle size
- Supports more chart types out of the box
- Easier to set up and use for simple charts
Cons of Chart.js
- Less customizable and flexible compared to Recharts
- Not specifically designed for React, which can lead to integration challenges
- Limited animation options
Code Comparison
Chart.js:
import Chart from 'chart.js/auto';
new Chart(ctx, {
type: 'bar',
data: chartData,
options: chartOptions
});
Recharts:
import { BarChart, Bar, XAxis, YAxis } from 'recharts';
<BarChart width={600} height={300} data={chartData}>
<XAxis dataKey="name" />
<YAxis />
<Bar dataKey="value" fill="#8884d8" />
</BarChart>
Chart.js uses a more imperative approach, creating a new chart instance with configuration objects. Recharts, being React-specific, uses a declarative approach with components. This makes Recharts more intuitive for React developers and allows for easier integration of charts into React applications.
While Chart.js is more versatile and can be used in various JavaScript environments, Recharts is tailored for React applications, offering better integration with React's component-based architecture and state management.
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
Pros of D3
- Highly flexible and customizable, allowing for complex and unique visualizations
- Extensive library with a wide range of chart types and data manipulation tools
- Direct manipulation of SVG elements for fine-grained control
Cons of D3
- Steeper learning curve due to its low-level API and complexity
- Requires more code to create basic charts compared to higher-level libraries
- Less suitable for rapid prototyping or simple visualization needs
Code Comparison
D3:
const svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 300);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 40)
.attr("y", d => 300 - d * 10)
.attr("width", 35)
.attr("height", d => d * 10);
Recharts:
<BarChart width={400} height={300} data={data}>
<XAxis dataKey="name" />
<YAxis />
<Bar dataKey="value" fill="#8884d8" />
</BarChart>
Recharts offers a more declarative and React-friendly approach, making it easier to create charts quickly with less code. However, D3 provides more flexibility and control over the visualization process, allowing for more complex and customized charts at the cost of increased complexity and development time.
📊 Interactive JavaScript Charts built on SVG
Pros of ApexCharts
- More customizable and feature-rich, offering a wider range of chart types
- Better performance with large datasets
- Supports both SVG and Canvas rendering
Cons of ApexCharts
- Larger bundle size, which may impact load times
- Steeper learning curve due to more complex API
- Less seamless integration with React ecosystem
Code Comparison
ApexCharts:
import ApexCharts from 'apexcharts'
const options = {
chart: { type: 'line' },
series: [{ data: [30, 40, 35, 50, 49, 60, 70] }],
xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997] }
}
const chart = new ApexCharts(document.querySelector("#chart"), options)
chart.render()
Recharts:
import { LineChart, Line, XAxis, YAxis } from 'recharts'
const data = [
{ year: 1991, value: 30 },
{ year: 1992, value: 40 },
// ... more data points
]
const Chart = () => (
<LineChart width={600} height={300} data={data}>
<Line type="monotone" dataKey="value" stroke="#8884d8" />
<XAxis dataKey="year" />
<YAxis />
</LineChart>
)
Both libraries offer powerful charting capabilities, but ApexCharts provides more flexibility and features at the cost of a larger bundle size and steeper learning curve. Recharts, on the other hand, offers a more React-friendly API and smaller bundle size, making it easier to integrate into React projects.
Highcharts JS, the JavaScript charting framework
Pros of Highcharts
- More extensive chart types and customization options
- Better support for older browsers and legacy systems
- Comprehensive documentation and examples
Cons of Highcharts
- Commercial license required for most use cases
- Steeper learning curve due to more complex API
- Larger file size, potentially impacting page load times
Code Comparison
Recharts (React-based):
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
<LineChart width={600} height={300} data={data}>
<Line type="monotone" dataKey="value" stroke="#8884d8" />
<CartesianGrid stroke="#ccc" />
<XAxis dataKey="name" />
<YAxis />
</LineChart>
Highcharts:
Highcharts.chart('container', {
series: [{
data: [1, 2, 3, 4, 5]
}],
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E']
}
});
Key Differences
- Recharts is specifically designed for React applications, while Highcharts is framework-agnostic
- Recharts uses a declarative approach, whereas Highcharts relies on a more imperative configuration
- Recharts is open-source and free for all use cases, while Highcharts requires a commercial license for most scenarios
JavaScript 3D Library.
Pros of three.js
- Powerful 3D rendering capabilities for complex visualizations
- Extensive documentation and large community support
- Versatile, supporting various 3D use cases beyond charts
Cons of three.js
- Steeper learning curve for beginners
- Heavier library size, potentially impacting load times
- Overkill for simple 2D chart requirements
Code Comparison
three.js:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
Recharts:
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
<LineChart width={600} height={300} data={data}>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<CartesianGrid stroke="#ccc" />
<XAxis dataKey="name" />
<YAxis />
</LineChart>
three.js is ideal for complex 3D visualizations, offering powerful rendering capabilities and extensive community support. However, it has a steeper learning curve and larger file size. Recharts, on the other hand, is more suitable for simpler 2D charts, with an easier setup process and smaller footprint. The code comparison illustrates the difference in complexity, with three.js requiring more setup for basic rendering, while Recharts provides a more declarative approach for creating charts.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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 depending only on some D3 submodules.
- Declarative components, components of charts are purely presentational.
Documentation at recharts.org and our storybook (WIP)
Please see the wiki for FAQ.
All development is done on the master
branch. The current latest release and storybook documentation reflects what is on the release
branch.
Examples
<LineChart width={400} height={400} data={data} margin={{ top: 5, right: 20, left: 10, bottom: 5 }}>
<XAxis dataKey="name" />
<Tooltip />
<CartesianGrid stroke="#f5f5f5" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
<Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
</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
.
dev build
$ git clone https://github.com/recharts/recharts.git
$ cd recharts
$ npm install
$ npm run build
Demo
To examine the demos in your local build, execute:
$ npm run[-script] demo
and then browse to http://localhost:3000.
Storybook
We are in the process of unifying documentation and examples in storybook. To run it locally, execute
$ npm run[-script] storybook
and then browse to http://localhost:6006.
Releases
Releases are automated via GH Actions - when a new release is created in GH, CI will trigger that:
- Runs a build
- Runs tests
- Runs
npm publish
Version increments and tagging are not automated at this time.
Release testing
Until we can automate more, it should be preferred to test as close to the results of npm publish
as we possibly can. This ensures we don't publish unintended breaking changes. One way to do that is using yalc
- npm i -g yalc
.
- Make your changes in recharts
yalc publish
in rechartsyalc add recharts
in your test package (ex: in a vite or webpack reach app with recharts installed, imported, and your recent changes used)npm install
- Test a local run, a build, etc.
Module Formats
- babel-plugin-recharts A simple transform to cherry-pick Recharts modules so you donât have to. Note: this plugin is out of date and may not work with 2.x
Thanks
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.
License
Copyright (c) 2015-2024 Recharts Group.
Top Related Projects
Simple HTML5 Charts using the <canvas> tag
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
📊 Interactive JavaScript Charts built on SVG
Highcharts JS, the JavaScript charting framework
JavaScript 3D Library.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot