Recharts is a composable charting library built on React components. It allows users to create various types of charts such as line, bar, area, pie, and more, using a declarative approach. It is easy to customize and extend, and it integrates well with the React ecosystem.
LineChart
This code sample demonstrates how to create a simple LineChart with two lines, using the Recharts library. The chart includes a grid, axes, tooltips, and a legend.
{"import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';\nconst data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}];\n<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>"}BarChart
This code sample shows how to create a BarChart with two bars per data point. It includes similar features to the LineChart, such as a grid, axes, tooltips, and a legend.
{"import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';\nconst data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}];\n<BarChart width={600} height={300} data={data}><CartesianGrid strokeDasharray=\"3 3\"/><XAxis dataKey=\"name\"/><YAxis/><Tooltip/><Legend /><Bar dataKey=\"pv\" fill=\"#8884d8\" /><Bar dataKey=\"uv\" fill=\"#82ca9d\" /></BarChart>"}PieChart
This code sample illustrates how to create a PieChart. It includes a Pie component with labels, a Tooltip for additional information on hover, and a Legend.
{"import { PieChart, Pie, Tooltip, Legend } from 'recharts';\nconst data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300}];\n<PieChart width={800} height={400}><Pie dataKey=\"value\" isAnimationActive={false} data={data} cx={200} cy={200} outerRadius={80} fill=\"#8884d8\" label /><Tooltip/><Legend /></PieChart>"}Chart.js is a popular canvas-based charting library that provides a wide range of chart types and is highly customizable. It is not React-specific and requires wrappers like 'react-chartjs-2' to integrate with React applications. Compared to Recharts, Chart.js may have better performance for complex animations and large datasets due to its canvas rendering.
Victory is another React chart library that offers a set of composable components for building interactive data visualizations. It is similar to Recharts in its React-centric approach but differs in its API design and customization options. Victory is known for its flexibility and extensive customization capabilities.
Highcharts is a comprehensive charting library that has been around for a long time. The 'highcharts-react-official' package is the official React wrapper for Highcharts. Highcharts offers a vast array of chart types and features, and it is known for its robustness and interactivity. However, it is not as tightly integrated with React as Recharts and may require a commercial license for certain uses.
Recharts is a Re-designed charting 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:
Expected release: April 2016
<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 is clearly separated. The lineChart is composed by x axis, tooltip, grid, and line items, and each of them is an independent React Component. The clear seperation and composition of components is one of the principle Recharts follow.
We'd love :heart: to hear what you think we should build. Please create a issue to write your usage or ideas.
We are looking for like-minded people who share the same idea about Recharts. The goal of this project is create more flexible charting library for React community.
Copyright (c) 2015-2016 Recharts Group
0.6.3 (February 10, 2016)
FAQs
React charts
The npm package recharts receives a total of 1,359,932 weekly downloads. As such, recharts popularity was classified as popular.
We found that recharts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.