DEV Community

Rupak Dey
Rupak Dey

Posted on

Best Chart Libraries for React

#webdev #react #javascript #uiweekly

1. Chartjs

Simple yet flexible JavaScript charting for designers & developers

Github Stars : 3.6k
Downloads/week : 304.1k

Chartjs

2. Chartist

Simple Responsive Charts

Github Stars : 12.4k
Downloads/week : 73.5k

chartist

3. Apexcharts

Modern & Interactive Open-source Charts

Github Stars : 9.8k
Downloads/week : 167.3k

apexcharts

Guess its time to build something new!
What are you going for?

Familiar with other libraries? Do share them in the comments!

Top comments (4)

Collapse
 
tam360 profile image
Mirza • • Edited

Go with Apache ECharts (44.8k stars on Github) if you want a library that is both easy to use and has tonnes of visualizations to choose from.

Collapse
 
deyrupak profile image
Rupak Dey •

Checked this. Its cool!

Collapse
 
ehsan profile image
Ehsan Azizi •

Worth mentioning, recharts - 15.7k ⭐

GitHub logo recharts / recharts

Redefined chart library built with React and D3

Recharts

Sponsors on Open Collective Backers on Open Collective Build Status Coverage Status npm version npm downloads MIT License

Introduction

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:

  1. Simply deploy with React components.
  2. Native SVG support, lightweight depending only on some D3 submodules.
  3. Declarative components, components of charts are purely presentational.

Examples

<LineChart
  width={400}
  height={400}
  data={data}
  margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
&gt
  <XAxis dataKey="name" /&gt
  <Tooltip /&gt
  <CartesianGrid stroke="#f5f5f5" /&gt
  <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
  <Line type="monotone"
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub
Collapse
 
deyrupak profile image
Rupak Dey •

++

Read next

dazevedo profile image

What is SignalR? A Real-Time Communication Framework for .NET

Daniel Azevedo -

vs-borodin profile image

Building a Collapsible UI Component in Angular: From Concept to Implementation 🚀

Vyacheslav Borodin -

dotnetfullstackdev profile image

Autofac Dependency Injection in ASP .NET Core 8

DotNet Full Stack Dev -

julie_ryan_df9e4e895cdcff profile image

Transform Your Cloud Migration Strategy: Transition Microsoft workloads to Linux on AWS with AI Solutions

Julie Ryan -