recharts vs chart.js vs victory vs react-vis | Data Visualization Libraries

Package	Downloads	Stars	Size	Issues	Publish	License

recharts	9,870,617	26,350	6.06 MB	436	2 days ago	MIT
chart.js	6,020,833	66,888	6.18 MB	506	2 months ago	MIT
victory	351,271	11,214	2.28 MB	98	a year ago	MIT
react-vis	109,024	8,782	2.18 MB	343	3 years ago	MIT

Package

Downloads

Stars

Size

Issues

Publish

License

recharts

9,870,617

26,350

6.06 MB

436

2 days ago

MIT

chart.js

6,020,833

66,888

6.18 MB

506

2 months ago

MIT

victory

351,271

11,214

2.28 MB

a year ago

MIT

react-vis

109,024

8,782

2.18 MB

343

3 years ago

MIT

Chart Types

recharts:
Recharts supports a wide variety of chart types, including line, bar, area, pie, scatter, and radar charts. It is built on top of SVG and provides a flexible and customizable approach to creating charts, making it easy to create complex visualizations with multiple data series.
chart.js:
Chart.js supports a variety of chart types, including line, bar, radar, doughnut, polar area, and bubble charts. It is designed for simplicity and provides a good selection of standard charts that cover most use cases.
victory:
Victory provides a comprehensive set of chart types, including line, bar, pie, scatter, area, and more. It also supports advanced features like stacked charts, grouped bar charts, and custom data visualizations, making it a versatile choice for more complex data presentations.
react-vis:
React-Vis offers a range of chart types, including line, bar, area, scatter, heatmap, and treemap. While it may not have as many chart types as some other libraries, it provides a solid foundation for creating visually appealing and informative charts.

Customization

recharts:
Recharts is highly customizable, allowing developers to modify almost every aspect of the charts, including styles, shapes, and behaviors. It supports the use of custom SVG elements, making it easy to create unique and visually appealing charts while keeping the code modular and maintainable.
chart.js:
Chart.js allows for basic customization of charts, including colors, labels, tooltips, and animations. However, it may be limited in terms of deep customization without modifying the underlying code or using plugins.
victory:
Victory offers extensive customization capabilities, including theming, styling, and the ability to create custom components. It provides a powerful API for controlling the appearance and behavior of charts, making it suitable for projects that require detailed and precise visual design.
react-vis:
React-Vis provides good customization options for its chart components, allowing developers to style charts using props and CSS. It is designed to be flexible while maintaining a simple API, making it easy to customize without a steep learning curve.

Integration with React

recharts:
Recharts is designed for React and leverages its component-based architecture. It provides a simple and intuitive API for creating charts, making it easy to integrate and use within React applications.
chart.js:
Chart.js can be integrated with React applications, but it requires some manual setup to manage the chart lifecycle and updates. There are third-party wrappers like react-chartjs-2 that simplify integration and provide a React-friendly API.
victory:
Victory is also built for React and provides a set of modular, composable chart components. It is designed to work seamlessly with React, allowing for easy integration and customization within React applications.
react-vis:
React-Vis is built specifically for React, providing a seamless integration with the framework. Its component-based architecture makes it easy to use and integrate into React applications without any additional setup.

Performance

recharts:
Recharts is built with performance in mind, especially for handling dynamic and responsive charts. It uses React’s virtual DOM and only re-renders components that change, making it efficient for most use cases. However, performance can be impacted with very large datasets or complex charts, so optimization may be needed in those cases.
chart.js:
Chart.js is generally performant for rendering standard charts, but performance may degrade with a large number of data points or complex animations. It is suitable for most use cases, but developers should be mindful of performance when working with highly detailed or interactive charts.
victory:
Victory is designed to handle a wide range of data sizes and complexities, but performance may vary depending on the chart type and the amount of data being rendered. It is generally performant, but developers should be aware of potential slowdowns with highly complex charts or large datasets.
react-vis:
React-Vis is optimized for performance, but like any React-based library, it can experience slowdowns with large datasets or overly complex visualizations. It is best suited for medium-sized datasets and charts that do not require excessive rendering or animation.

Ease of Use: Code Examples

recharts:

Simple Pie Chart with Recharts

import React from 'react';
import { PieChart, Pie, Cell, Tooltip, Legend } 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 SimplePieChart = () => {
  return (
    <PieChart width={400} height={400}>
      <Pie
        data={data}
        cx={200}
        cy={200}
        labelLine={false}
        label={({ name, percent }) => `${name} (${(percent * 100).toFixed(0)}%)`}
        outerRadius={80}
        dataKey="value"
      >
        {data.map((entry, index) => (
          <Cell key={index} fill={COLORS[index % COLORS.length]} />
        ))}
      </Pie>
      <Tooltip />
      <Legend />
    </PieChart>
  );
};

export default SimplePieChart;

chart.js:

Simple Bar Chart with Chart.js

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const 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>

victory:

Simple Bar Chart with Victory

import React from 'react';
import { VictoryBar, VictoryChart, VictoryAxis } from 'victory';

const data = [
  { x: 'A', y: 2 },
  { x: 'B', y: 3 },
  { x: 'C', y: 5 },
  { x: 'D', y: 4 },
];

const SimpleBarChart = () => {
  return (
    <VictoryChart>
      <VictoryAxis />
      <VictoryAxis dependentAxis />
      <VictoryBar data={data} />
    </VictoryChart>
  );
};

export default SimpleBarChart;

react-vis:

Simple Line Chart with React-Vis

import React from 'react';
import { XYPlot, LineSeries, XAxis, YAxis } from 'react-vis';
import 'react-vis/dist/style.css';

const SimpleLineChart = () => {
  const data = [
    { x: 1, y: 10 },
    { x: 2, y: 5 },
    { x: 3, y: 15 },
    { x: 4, y: 20 },
    { x: 5, y: 25 },
  ];

  return (
    <XYPlot height={300} width={300}>
      <XAxis title="X Axis" />
      <YAxis title="Y Axis" />
      <LineSeries data={data} />
    </XYPlot>
  );
};

export default SimpleLineChart;

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.