![Cover image for ✨Top React Charts Libraries [2021]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8blcgbh0tff4nq0hxsum.png)
Recharts
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.
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.
visx
visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.
For more examples using visx, check out the gallery.
nivo
nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.
Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.
Installation
In order to use nivo, you have to install the @nivo/core package and then choose some of the scoped @nivo packages according to the charts you wish to use:
yarn add @nivo/core @nivo/bar
Features
- Highly customizable
- Motion/transitions, powered by react-motion
- Component playground
- Exhaustive documentation
- Isomorphic rendering
- SVG charts
- HTML charts
- Canvas charts
- server side rendering API
- SVG patterns
- Gradients
- responsive charts
billboard.js
billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.
The name "billboard" comes from the famous
billboard chartwhich everybody knows.
Supported chart types
Download and Installation
Download dist files from the repo directly or install it via npm.
For development (Uncompressed)
You can download the uncompressed files for development
Latest
- https://naver.github.io/billboard.js/release/latest/dist/billboard.js
- https://naver.github.io/billboard.js/release/latest/dist/billboard.css
Specific version
- https://naver.github.io/billboard.js/release/[VERSION]/dist/billboard.js
- https://naver.github.io/billboard.js/release/[VERSION]/dist/billboard.css
react-vis
A COMPOSABLE VISUALIZATION SYSTEM
Overview
A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.
Some notable features:
- Simplicity.
react-visdoesn't require any deep knowledge of data visualization libraries to start building your first visualizations. - Flexibility.
react-visprovides a set of basic building blocks for different charts. For instance, separate X and Y axis components. This provides a high level of control of chart layout for applications that need it. - Ease of use. The library provides a set of defaults which can be overridden by the custom user's settings.
- Integration with React.
react-vissupports the React's lifecycle and doesn't create unnecessary nodes.
react-chartjs-2
React wrapper for Chart.js 2.0 and 3.0, the most popular charting library 📊
React wrapper for Chart.js
Examples
Live: reactchartjs.github.io/react-chartjs-2
See these examples for more information
More react resource❤️ A curated list of awesome React frameworks, libraries and Components.
Top comments (1)
REAVIZ is another great one - reaviz.io