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 biggest feature or difference is helping you write charts in React application perfectly. There some philosophies of Recharts:
<LineChart width={400} height={400} data={data}
margin={{top: 5, right: 20, left: 10, bottom: 5}}>
<XAxis dataKey='name' />
<Tooltip />
<CartesianGrid stroke='#f5f5f5' />
<LineItem type='monotone' dataKey='uv' stroke='#ff7300' yAxisId={0} />
<LineItem type='monotone' dataKey='pv' stroke='#387908' yAxisId={1} />
</LineChart>
All the submodules of Recharts is separated. The lineChart is composed by x axis, tooltip, grid, and line items, and each of them is the tiny React Component. Their is the Recharts want to do.
We are looking for people who share the idea about Recharts. The goal of this project is create more flexible charting library where developers using React at the same time.
Copyright (c) 2015-2016 Recharts Group
0.4.0 (January 26, 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.