Top 10 Best React Chart Component for App

React chart is a graphical representation of data, in which “the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart”. Using the right type of chart is one decision to make when presenting data but as React developers, we have our own set of concerns, mainly, choosing the right chart component library.

Here are the 10 best react charts component I’ve picked. You can view and apply to your application.

1. Rough Charts

A responsive, composable react charting library with a hand-drawn style.

Features

• It’s responsive.
• It’s flexible and easy to compose. You can compose all available ChartSeries Components and render any shapes you like.
• It’s lovely.
• It’s written in TypeScript.

View Demo: https://beizhedenglong.github.io/rough-charts/?path=/docs/roughcharts–page

Github: https://github.com/beizhedenglong/rough-charts

Download Link: https://github.com/beizhedenglong/rough-charts/archive/master.zip

2. Channel Grapher

This is a responsive ThingSpeak API grapher. It uses a JSON router to overcome CORS.

Built using ReactJS, Bootstrap and ChartJS.

View Demo: https://opens3.net/channel-grapher.html

Github: https://github.com/wilyarti/channel-grapher

Download Link: https://github.com/wilyarti/channel-grapher/archive/master.zip

3. react-charts

Simple, immersive and interactive charts for React.

Features

• Line, Bar, Bubble, & Area Charts
• Hyper Responsive
• Powered by D3
• Fully Declarative
• Flexible data model

View Demo: https://react-charts.js.org/examples/line

Github: https://github.com/tannerlinsley/react-charts

Download Link: https://github.com/tannerlinsley/react-charts/archive/master.zip

4. react-charts-and-maps

This project contains the implementation of libraries D3, highcharts and react-google-maps with the ReactJS. It shows how easy is adding those libraries in ReactJS.

View Demo: https://marekdano.github.io/react-charts-and-maps/

Github: https://github.com/marekdano/react-charts-and-maps

Download Link: https://github.com/marekdano/react-charts-and-maps/archive/master.zip

5. STORM React Diagrams

React Diagrams is currently getting a bit of a rewrite to enable much more advanced features.

View Demo: http://projectstorm.cloud/react-diagrams/?path=/story/simple-usage–simple-flow-example

Github: https://github.com/projectstorm/react-diagrams

Download Link: https://github.com/projectstorm/react-diagrams/archive/master.zip

6. React-d3-graph

Interactive and configurable graphs with react and d3 effortlessly.

View Demo: https://goodguydaniel.com/react-d3-graph/sandbox/index.html

Github: https://github.com/jcapobianco-cbi/react-d3-graph-cbi

Download Link: https://github.com/jcapobianco-cbi/react-d3-graph-cbi/archive/master.zip

7. React-VizGrammar

React VizGrammar is a wrapper around Victory JS and it makes charting easier by adding boilerplate code so that designers and developers can get started and set it up in a few minutes.

A chart can be embedded in a React environment simply by using the VizG react component.

View Demo: https://wso2.github.io/react-vizgrammar/#/

Github: https://github.com/wso2/react-vizgrammar

Download Link: https://github.com/wso2/react-vizgrammar/archive/master.zip

8. preact-charts

preact based charting library. Written with d3-maths, and TypeScript!

View Demo: https://codesandbox.io/s/ko300qzppv

Github: http://github.com/pmkroeker/preact-charts

Download Link: https://github.com/pmkroeker/preact-charts/archive/master.zip

9. REAVIZ

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

View Demo: https://reaviz.io/?path=/docs/docs-intro–page

Github: https://github.com/jask-oss/reaviz

Download Link: https://github.com/jask-oss/reaviz/archive/master.zip

10. React Signals Plot

This is React Signals Plot component for geophysical data visualization.

The component supports ‘on the fly’ data compression. That’s why you can use it for drawing line charts which contain millions of points. ReactSignalsPlot is an interactive component. You can use a mouse or touch to move and zoom.

View Demo: https://gromtech.github.io/react-signals-plot/

Github: https://github.com/gromtech/react-signals-plot

Download Link: https://github.com/gromtech/react-signals-plot/archive/develop.zip

#react #react-chart #react-chart-component #chart #chart-component