One of the most important aspects of any web application is how data is displayed. As a React developer, the chances are that sooner or later, you will need to represent data fetched from an API in a chart or a graph to make it more understandable for the end user. One of the nice things about React is that its component-based architecture lends itself to being able to install libraries that allow you to easily create charts without having to start from scratch.
The charting libraries we’ll look at today are JavaScript libraries that generate charts by reading the input data and rendering it as a visualization, such as a graph or a chart. Most libraries support common data visualizations such as area charts, line graphs, bar graphs, and pie charts, and some go much further, including things like scatter plots, tree maps, and radar charts. Many of the most popular charting libraries have been packaged for React and can be easily incorporated into your applications.
Selecting a Charting Library for Data Visualization in React
Not all charting libraries are created equal. You’ll want to look for a charting library that’s simple to use, integrates seamlessly with your application, and serves your project’s needs. In this post, we’ll look at the best React charting libraries to work with, so you’re prepared to choose the right charting library for your project. The libraries discussed in this article have been selected for their ease of use, community support, and customizability.
Recharts
With 18.3k stars on GitHub, 1.4k forks, and 185 watchers at the time of writing, Recharts is a charting library built with D3 and React, and released under the MIT License. This library averages around 900,000 weekly downloads, and has an unpacked size of 5.1 MB. It has well-structured documentation that is easy to follow, a robust group of over two hundred contributors on GitHub, and an enormous community, with over 85k users on GitHub.
It is based on React’s principle of reusable components, which makes it easy for developers to build charts with reusable React components, and has native SVG support. Recharts provides appealing charts out of the box, and it allows you to customize them by tweaking component props and passing in custom components. It also allows users to edit the provided reusable components, customizing them to fit their needs. The charts provided by this library are not inherently mobile responsive. This problem can be solved by integrating them into a responsive wrapper component to enable them to adjust to the width of the devices easily.
To get started with Recharts, you can install it using npm or any other method discussed in the official documentation.
Below is the code to create a simple line chart with a Cartesian grid, an x-axis, and a y-axis using Recharts:
Here is the line graph produced by the above code via our Codesandbox template for Recharts React:
ECharts for React
ECharts is licensed under the MIT License, and at the time of writing, has 3.7k stars, 503 forks, and 68 watchers on GitHub. It’s a React wrapper for Apache ECharts. It averages over 100,000 weekly downloads and has an unpacked size of 74.6 kB.
ECharts is a powerful, free charting library that enables developers to seamlessly integrate highly interactive, customizable, and responsive charts into their React websites. This charting library is easy to use, as it requires the developer to only define the required options for the chart in an object, and then pass them to the ReactEcharts component as a prop. This library has an actively growing developer community of over 12k users on GitHub. Some developers may find the state of the documentation lacking, and because the documentation doesn’t offer any walkthroughs, beginners may find it difficult to follow.
To get started with ECharts, run this command in the terminal:
This also installs Apache ECharts as a required dependency.
Use the code below to create a simple bar graph with ECharts for React:
This is the output produced by the code above via our Codesandbox template for ECharts for React:
React ChartJS 2
React ChartJS 2 is a React charting library licensed under the MIT License. At the time of writing, it has 5.1k stars, 1.1k forks, and 48 watchers on GitHub. It averages over 500,000 weekly downloads and has a minimized size of 54.9 kB.
The React ChartJS 2 library provides React components for versions two and three of the well-known Chart.js library. This charting library is easy to use, as it comes with different types of responsive components such as bar, scatter, doughnut,and pie charts, allowing the developer to easily pass in the required props and render charts. It has a rapidly growing community more an 140k users on GitHub, and well-structured documentation that is easy to follow as a beginner.
To get started with this library, run the following command in the terminal:
The code below creates a simple line chart with this library:
This is the line chart produced by the code above via our Codesandbox template for React ChartJS 2:
VISX
VISX, short for visualization components, is licensed under the MIT License and at the time of writing, has 15.3k stars, 588 forks, and 151 watchers on GitHub. The full library has 9.4k weekly downloads and an unpacked size of 12 kB. Due to its modular nature, though, this is a poor illustration of the library’s popularity; some of its packages, such as @visx/shape and @visx/point, consistently see over 120k downloads a week. VISX was developed by Airbnb, and it contains several reusable visualization components.
This library combines the power of D3.js to perform complex calculations under the hood and React to update the DOM. It’s split into multiple small packages, which avoids bloat by allowing developers to download only the packages they need. It is also unopinionated, in that it enables developers to use their own animation and state management libraries. Since VISX assumes you’re using React, it allows you to choose any React-compatible animation library.
VISX is easy to use for developers with React knowledge and enables the developer to customize it as needed by building their own reusable chart components. The use of small, D3-based primitive visualization components gives you the freedom to build complex visualizations. It has well-structured documentation with a gallery of examples to help you get started easily, and has a growing community of over 1.7k users on GitHub.
To get started with this library, run the following command in the terminal:
To create a simple bar chart with this library, use the code below:
This is the bar chart produced by the code above via our Codesandbox template for React VISX:
Conclusion: The Best React Charting Libraries for Data Visualization and Analytics
In this article, you’ve learned about the best React charting libraries that you can use to visualize data in an appealing way in your React app: Recharts, Echarts for React, React ChartJS 2, and VISX. These libraries each have their strengths, whether that’s allowing for a great deal of customization, excellent documentation, or well-established communities.
Propel Data is a serverless analytics API platform that enables developers to build analytics products powered by large-scale data. Propel helps developers offload the tedious job of managing additional complex data infrastructure or creating new data silos by leveraging the already available data in the warehouse. The data is then operationalized and served via the low-latency APIs, which enables you to quickly build insights dashboards, advanced reporting, usage metering, and product metrics.
Propel Data offers a GraphQL API for data analytics that allows you to define Metrics and easily build time series charts, a data serving layer that caches data from the data warehouse and serves it blazingly fast, and a data access policy engine that ensures only authorized end users can access their data. If you’re interested in what we’re doing, sign up for our monthly product updates, follow us on Twitter @propeldatacloud, or join our waitlist to try the product yourself.
