Convert Figma logo to code with AI

recharts logorecharts

Redefined chart library built with React and D3

24,450
1,730
24,450
442

Top Related Projects

65,161

Simple HTML5 Charts using the <canvas> tag

109,248

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

📊 Interactive JavaScript Charts built on SVG

Highcharts JS, the JavaScript charting framework

103,278

JavaScript 3D Library.

Quick Overview

Recharts is a composable charting library built on React components. It provides a wide range of chart types and customization options, making it easy to create responsive and interactive charts for web applications. Recharts leverages the power of SVG to render charts, ensuring high-quality visuals across different devices and screen sizes.

Pros

  • Easy to use and integrate with React applications
  • Highly customizable with a wide range of chart types and options
  • Responsive design that adapts to different screen sizes
  • Good performance due to optimized rendering and updates

Cons

  • Limited animation capabilities compared to some other charting libraries
  • Documentation can be unclear or incomplete in some areas
  • Some advanced features may require workarounds or custom implementations
  • Learning curve for complex customizations

Code Examples

  1. Creating a simple line chart:
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
];

const SimpleLineChart = () => (
  <LineChart width={600} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Line type="monotone" dataKey="pv" stroke="#8884d8" />
    <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
  </LineChart>
);
  1. Creating a customized pie chart:
import { PieChart, Pie, Cell, Tooltip } from 'recharts';

const data = [
  { name: 'Group A', value: 400 },
  { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 },
  { name: 'Group D', value: 200 },
];

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

const CustomizedPieChart = () => (
  <PieChart width={400} height={400}>
    <Pie
      data={data}
      cx={200}
      cy={200}
      labelLine={false}
      outerRadius={80}
      fill="#8884d8"
      dataKey="value"
    >
      {data.map((entry, index) => (
        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
      ))}
    </Pie>
    <Tooltip />
  </PieChart>
);
  1. Creating a responsive bar chart:
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
];

const ResponsiveBarChart = () => (
  <ResponsiveContainer width="100%" height={300}>
    <BarChart data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="pv" fill="#8884d8" />
      <Bar dataKey="uv" fill="#82ca9d" />
    </BarChart>

Competitor Comparisons

65,161

Simple HTML5 Charts using the <canvas> tag

Pros of Chart.js

  • Lightweight and fast, with a smaller bundle size
  • Supports more chart types out of the box
  • Easier to set up and use for simple charts

Cons of Chart.js

  • Less customizable and flexible compared to Recharts
  • Not specifically designed for React, which can lead to integration challenges
  • Limited animation options

Code Comparison

Chart.js:

import Chart from 'chart.js/auto';

new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: chartOptions
});

Recharts:

import { BarChart, Bar, XAxis, YAxis } from 'recharts';

<BarChart width={600} height={300} data={chartData}>
  <XAxis dataKey="name" />
  <YAxis />
  <Bar dataKey="value" fill="#8884d8" />
</BarChart>

Chart.js uses a more imperative approach, creating a new chart instance with configuration objects. Recharts, being React-specific, uses a declarative approach with components. This makes Recharts more intuitive for React developers and allows for easier integration of charts into React applications.

While Chart.js is more versatile and can be used in various JavaScript environments, Recharts is tailored for React applications, offering better integration with React's component-based architecture and state management.

109,248

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Pros of D3

  • Highly flexible and customizable, allowing for complex and unique visualizations
  • Extensive library with a wide range of chart types and data manipulation tools
  • Direct manipulation of SVG elements for fine-grained control

Cons of D3

  • Steeper learning curve due to its low-level API and complexity
  • Requires more code to create basic charts compared to higher-level libraries
  • Less suitable for rapid prototyping or simple visualization needs

Code Comparison

D3:

const svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 300);

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 40)
    .attr("y", d => 300 - d * 10)
    .attr("width", 35)
    .attr("height", d => d * 10);

Recharts:

<BarChart width={400} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Bar dataKey="value" fill="#8884d8" />
</BarChart>

Recharts offers a more declarative and React-friendly approach, making it easier to create charts quickly with less code. However, D3 provides more flexibility and control over the visualization process, allowing for more complex and customized charts at the cost of increased complexity and development time.

📊 Interactive JavaScript Charts built on SVG

Pros of ApexCharts

  • More customizable and feature-rich, offering a wider range of chart types
  • Better performance with large datasets
  • Supports both SVG and Canvas rendering

Cons of ApexCharts

  • Larger bundle size, which may impact load times
  • Steeper learning curve due to more complex API
  • Less seamless integration with React ecosystem

Code Comparison

ApexCharts:

import ApexCharts from 'apexcharts'

const options = {
  chart: { type: 'line' },
  series: [{ data: [30, 40, 35, 50, 49, 60, 70] }],
  xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997] }
}

const chart = new ApexCharts(document.querySelector("#chart"), options)
chart.render()

Recharts:

import { LineChart, Line, XAxis, YAxis } from 'recharts'

const data = [
  { year: 1991, value: 30 },
  { year: 1992, value: 40 },
  // ... more data points
]

const Chart = () => (
  <LineChart width={600} height={300} data={data}>
    <Line type="monotone" dataKey="value" stroke="#8884d8" />
    <XAxis dataKey="year" />
    <YAxis />
  </LineChart>
)

Both libraries offer powerful charting capabilities, but ApexCharts provides more flexibility and features at the cost of a larger bundle size and steeper learning curve. Recharts, on the other hand, offers a more React-friendly API and smaller bundle size, making it easier to integrate into React projects.

Highcharts JS, the JavaScript charting framework

Pros of Highcharts

  • More extensive chart types and customization options
  • Better support for older browsers and legacy systems
  • Comprehensive documentation and examples

Cons of Highcharts

  • Commercial license required for most use cases
  • Steeper learning curve due to more complex API
  • Larger file size, potentially impacting page load times

Code Comparison

Recharts (React-based):

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

<LineChart width={600} height={300} data={data}>
  <Line type="monotone" dataKey="value" stroke="#8884d8" />
  <CartesianGrid stroke="#ccc" />
  <XAxis dataKey="name" />
  <YAxis />
</LineChart>

Highcharts:

Highcharts.chart('container', {
  series: [{
    data: [1, 2, 3, 4, 5]
  }],
  xAxis: {
    categories: ['A', 'B', 'C', 'D', 'E']
  }
});

Key Differences

  • Recharts is specifically designed for React applications, while Highcharts is framework-agnostic
  • Recharts uses a declarative approach, whereas Highcharts relies on a more imperative configuration
  • Recharts is open-source and free for all use cases, while Highcharts requires a commercial license for most scenarios
103,278

JavaScript 3D Library.

Pros of three.js

  • Powerful 3D rendering capabilities for complex visualizations
  • Extensive documentation and large community support
  • Versatile, supporting various 3D use cases beyond charts

Cons of three.js

  • Steeper learning curve for beginners
  • Heavier library size, potentially impacting load times
  • Overkill for simple 2D chart requirements

Code Comparison

three.js:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Recharts:

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

<LineChart width={600} height={300} data={data}>
  <Line type="monotone" dataKey="uv" stroke="#8884d8" />
  <CartesianGrid stroke="#ccc" />
  <XAxis dataKey="name" />
  <YAxis />
</LineChart>

three.js is ideal for complex 3D visualizations, offering powerful rendering capabilities and extensive community support. However, it has a steeper learning curve and larger file size. Recharts, on the other hand, is more suitable for simpler 2D charts, with an easier setup process and smaller footprint. The code comparison illustrates the difference in complexity, with three.js requiring more setup for basic rendering, while Recharts provides a more declarative approach for creating charts.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Recharts

storybook Build Status codecov 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.

Documentation at recharts.org and our storybook (WIP)

Please see the wiki for FAQ.

All development is done on the master branch. The current latest release and storybook documentation reflects what is on the release branch.

Examples

<LineChart width={400} height={400} data={data} margin={{ top: 5, right: 20, left: 10, bottom: 5 }}>
  <XAxis dataKey="name" />
  <Tooltip />
  <CartesianGrid stroke="#f5f5f5" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
  <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
</LineChart>

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.

Installation

npm

NPM is the easiest and fastest way to get started using Recharts. It is also the recommended installation method when building single-page applications (SPAs). It pairs nicely with a CommonJS module bundler such as Webpack.

# latest stable
$ npm install recharts react-is

react-is needs to match the version of your installed react package.

umd

The UMD build is also available on unpkg.com:

<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-is/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>

Then you can find the library on window.Recharts.

dev build

$ git clone https://github.com/recharts/recharts.git
$ cd recharts
$ npm install
$ npm run build

Demo

To examine the demos in your local build, execute:

$ npm run[-script] demo

and then browse to http://localhost:3000.

Storybook

We are in the process of unifying documentation and examples in storybook. To run it locally, execute

$ npm run[-script] storybook

and then browse to http://localhost:6006.

Releases

Releases are automated via GH Actions - when a new release is created in GH, CI will trigger that:

  1. Runs a build
  2. Runs tests
  3. Runs npm publish

Version increments and tagging are not automated at this time.

Release testing

Until we can automate more, it should be preferred to test as close to the results of npm publish as we possibly can. This ensures we don't publish unintended breaking changes. One way to do that is using yalc - npm i -g yalc.

  1. Make your changes in recharts
  2. yalc publish in recharts
  3. yalc add recharts in your test package (ex: in a vite or webpack reach app with recharts installed, imported, and your recent changes used)
  4. npm install
  5. Test a local run, a build, etc.

Module Formats

  • babel-plugin-recharts A simple transform to cherry-pick Recharts modules so you don’t have to. Note: this plugin is out of date and may not work with 2.x

Thanks

Chromatic

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

License

MIT

Copyright (c) 2015-2024 Recharts Group.

NPM DownloadsLast 30 Days