recharts vs apexcharts | Data Visualization Libraries Comparison

Package	Downloads	Stars	Size	Issues	Publish	License

recharts	9,800,756	25,907	5.47 MB	468	5 days ago	MIT
apexcharts	1,211,455	14,853	5 MB	334	6 days ago	SEE LICENSE IN LICENSE

Package

Downloads

Stars

Size

Issues

Publish

License

recharts

9,800,756

25,907

5.47 MB

468

5 days ago

MIT

apexcharts

1,211,455

14,853

5 MB

334

6 days ago

SEE LICENSE IN LICENSE

Chart Types

recharts:
recharts provides a good selection of chart types, including line, bar, area, pie, radar, and scatter charts. While it may not have as many built-in chart types as apexcharts, its composable nature allows developers to create custom chart types by combining existing components.
apexcharts:
apexcharts supports a wide variety of chart types, including line, area, bar, column, pie, donut, radial bar, and more. It also offers advanced chart types like mixed charts, heatmaps, and treemaps, providing flexibility for different data visualization needs.

Customization

recharts:
recharts provides a high level of customization through its React component architecture. Developers can easily style components, create custom tooltips, legends, and even build entirely custom chart components by leveraging the flexibility of React.
apexcharts:
apexcharts offers extensive customization options for almost every aspect of the charts, including colors, labels, tooltips, legends, and animations. It also supports dynamic updates and real-time data visualization, allowing for interactive and engaging charts.

Interactivity

recharts:
recharts supports interactivity through its React components, including tooltips, legends, and event handling. Developers can easily add interactive features by leveraging React's state and props, making it highly customizable.
apexcharts:
apexcharts includes built-in interactivity features such as tooltips, zooming, panning, and data point selection. It also supports events and callbacks, allowing developers to handle user interactions and update the chart dynamically.

Integration

recharts:
recharts is specifically designed for React applications, making it a great choice for projects that use React. Its component-based architecture allows for seamless integration and reusability within React components.
apexcharts:
apexcharts can be easily integrated into any web application, regardless of the framework. It provides a simple API for creating charts with just a few lines of code, and it works well with both vanilla JavaScript and modern frameworks like React, Angular, and Vue.

Documentation and Community

recharts:
recharts offers good documentation with examples and guides for using the library. Being an open-source project, it has a growing community of contributors and users who share resources and provide support.
apexcharts:
apexcharts has comprehensive documentation, including examples, API references, and tutorials. It also has an active community and support channels, making it easy for developers to find help and resources.

Ease of Use: Code Examples

recharts:

Simple Line Chart with recharts

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

const data = [
  { name: 'Jan', sales: 30 },
  { name: 'Feb', sales: 40 },
  { name: 'Mar', sales: 35 },
  { name: 'Apr', sales: 50 },
  { name: 'May', sales: 49 },
  { name: 'Jun', sales: 60 },
  { name: 'Jul', sales: 70 }
];

const SimpleLineChart = () => (
  <LineChart width={600} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Line type="monotone" dataKey="sales" stroke="#8884d8" />
  </LineChart>
);

export default SimpleLineChart;

apexcharts:

Simple Line Chart with apexcharts

<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
  var options = {
    chart: {
      type: 'line',
      height: 350
    },
    series: [{
      name: 'Sales',
      data: [30, 40, 35, 50, 49, 60, 70]
    }],
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    }
  };
  var chart = new ApexCharts(document.querySelector('#chart'), options);
  chart.render();
</script>

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:

Simply deploy with React components.

Native SVG support, lightweight with minimal dependencies.

Declarative components.

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

Examples

<LineChart width={400} height={400} data={data}> <XAxis dataKey="name" /> <Tooltip /> <CartesianGrid stroke="#f5f5f5" /> <Line type="monotone" dataKey="uv" stroke="#ff7300" /> <Line type="monotone" dataKey="pv" stroke="#387908" /> </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.