DEV Community

Discussion on: Best Chart Libraries for React

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
Collapse
deyrupak profile image
Rupak Dey Author

++