chart.js vs recharts vs echarts vs apexcharts | Data Visualization Libraries Comparison

Package	Downloads	Stars	Size	Issues	Publish	License

chart.js	2,112,349	65,068	4.94 MB	447	a month ago	MIT
recharts	1,364,950	24,352	4.71 MB	445	24 days ago	MIT
echarts	561,141	61,524	53.2 MB	2,140	8 days ago	Apache-2.0
apexcharts	522,538	14,534	4.9 MB	304	17 days ago	MIT

Package

Downloads

Stars

Size

Issues

Publish

License

chart.js

2,112,349

65,068

4.94 MB

447

a month ago

MIT

recharts

1,364,950

24,352

4.71 MB

445

24 days ago

MIT

echarts

561,141

61,524

53.2 MB

2,140

8 days ago

Apache-2.0

apexcharts

522,538

14,534

4.9 MB

304

17 days ago

MIT

Chart Types

chart.js:
Chart.js provides support for 11 different chart types, including line, bar, radar, doughnut, polar area, bubble, and scatter charts. It also allows for the creation of mixed charts by combining multiple chart types in a single canvas.
recharts:
Recharts focuses on providing a set of composable chart components for React applications. It supports common chart types such as line, bar, pie, area, and scatter charts, but it is not as extensive as some other libraries in terms of specialized chart types.
echarts:
ECharts is known for its extensive support for complex and specialized chart types, including tree diagrams, sunburst charts, heatmaps, and more. It also supports 3D charts and custom visualizations, making it one of the most versatile libraries for data representation.
apexcharts:
ApexCharts supports a wide variety of chart types, including line, bar, area, pie, radial bar, and more. It also offers mixed charts, which allow you to combine different types of charts in a single visualization.

Customization

chart.js:
Chart.js is highly customizable, allowing developers to modify almost every aspect of the chart, including scales, legends, tooltips, and animations. It also supports plugins, which can be used to extend the functionality and add custom features.
recharts:
Recharts allows for customization of chart components through props and CSS. Since it is built with React, developers can easily create reusable and customizable components, but it may require more effort to achieve deep customization compared to other libraries.
echarts:
ECharts provides extensive customization options, including the ability to style charts using JSON configuration. It supports dynamic data updates, custom themes, and even allows for the creation of interactive visualizations using JavaScript.
apexcharts:
ApexCharts offers a high level of customization for its charts, including the ability to modify colors, labels, tooltips, and animations. It also supports custom SVG rendering and provides a straightforward API for configuring chart properties.

Performance

chart.js:
Chart.js is lightweight and performs efficiently with small to medium-sized data sets. It may experience performance issues with very large data sets or highly complex charts, but these can often be mitigated with optimizations.
recharts:
Recharts is optimized for performance in React applications, but its performance can be affected by the number of rendered components and the complexity of the charts. It is best suited for small to medium-sized data sets.
echarts:
ECharts is designed to handle large data sets and complex visualizations efficiently. It uses a canvas-based rendering approach, which helps maintain performance even with thousands of data points and intricate chart types.
apexcharts:
ApexCharts performs well with moderate data sets and provides smooth interactions. However, performance may degrade with extremely large data sets, especially if multiple charts are rendered on the same page.

Interactivity

chart.js:
Chart.js supports basic interactivity out of the box, such as tooltips and hover effects. Developers can add more interactive features using plugins and custom JavaScript code, but it may require additional effort.
recharts:
Recharts provides good interactivity, especially for React applications. It supports tooltips, legends, and event handling, allowing developers to create interactive charts with relative ease.
echarts:
ECharts excels in interactivity, offering advanced features like dynamic data updates, draggable elements, and customizable tooltips. It also supports event handling and allows for the creation of highly interactive and engaging visualizations.
apexcharts:
ApexCharts provides a range of interactive features, including tooltips, zooming, panning, and data point selection. These features are easy to implement and enhance the user experience without requiring extensive configuration.

Ease of Use: Code Examples

chart.js:

Simple Bar Chart with Chart.js

<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ['rgba(255, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)',
                      'rgba(255, 206, 86, 0.2)',
                      'rgba(75, 192, 192, 0.2)',
                      'rgba(153, 102, 255, 0.2)',
                      'rgba(255, 159, 64, 0.2)'],
      borderColor: ['rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});
</script>

recharts:

Simple Area Chart with Recharts

import React from 'react';
import { AreaChart, Area, XAxis, YAxis, Tooltip, CartesianGrid, 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 },
  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100
};

const Example = () => (
  <ResponsiveContainer width="100%" height={400}>
    <AreaChart data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Area type="monotone" dataKey="pv" stroke="#8884d8" fill="rgba(136, 132, 216, 0.2)" />
    </AreaChart>
  </ResponsiveContainer>
);

export default Example;

echarts:

Simple Pie Chart with ECharts

<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
  title: {
    text: 'ECharts Entry Example',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [{
    name: 'Access From',
    type: 'pie',
    radius: '50%',
    data: [
      {value: 1048, name: 'Search Engine'},
      {value: 735, name: 'Direct'},
      {value: 580, name: 'Email'},
      {value: 484, name: 'Union Ads'}
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};
myChart.setOption(option);
</script>

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'
  },
  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>