recharts vs chart.js vs d3 vs echarts vs apexcharts vs victory vs plotly.js vs vega vs @observablehq/plot
JavaScript Charting Libraries Comparison
1 Year
rechartschart.jsd3echartsapexchartsvictoryplotly.jsvega@observablehq/plotSimilar Packages:
What's JavaScript Charting Libraries?

JavaScript charting libraries are tools that allow developers to create interactive and visually appealing data visualizations for web applications. These libraries provide a variety of chart types and customization options, enabling the representation of complex datasets in an understandable format. They cater to different needs, from simple charts to complex visualizations, and can be used in various contexts, such as dashboards, reports, and data analysis tools.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
recharts6,730,82325,2864.64 MB4552 months agoMIT
chart.js4,721,27966,0154.96 MB4812 months agoMIT
d34,115,514110,775871 kB20a year agoISC
echarts1,211,83963,69053.2 MB2,0605 months agoApache-2.0
apexcharts1,100,25914,7884.95 MB320a month agoMIT
victory258,02811,1582.28 MB905 months agoMIT
plotly.js233,51017,60797.2 MB7074 months agoMIT
vega197,54611,5169.21 MB4722 months agoBSD-3-Clause
@observablehq/plot69,5574,8111.53 MB3474 months agoISC
Feature Comparison: recharts vs chart.js vs d3 vs echarts vs apexcharts vs victory vs plotly.js vs vega vs @observablehq/plot

Ease of Use

  • recharts:

    Recharts is built on React, making it easy to use for React developers. Its component-based architecture allows for quick integration and customization within React applications.

  • chart.js:

    Chart.js is known for its simplicity and ease of use. It allows developers to create basic charts with just a few lines of code, making it a great choice for beginners.

  • d3:

    D3.js has a steeper learning curve due to its flexibility and power. Users need to understand the underlying concepts of data binding and DOM manipulation to fully leverage its capabilities.

  • echarts:

    ECharts is user-friendly with a rich set of examples and documentation, allowing developers to create complex charts without extensive coding. Its configuration is straightforward, making it accessible for most users.

  • apexcharts:

    ApexCharts offers a straightforward API and comprehensive documentation, making it easy for developers to create responsive charts quickly. It requires minimal setup, which is ideal for rapid development.

  • victory:

    Victory is designed for React and provides a modular approach to building charts. Its components are easy to use and integrate, making it a good choice for React developers.

  • plotly.js:

    Plotly.js provides a high-level API that simplifies the creation of complex visualizations. Its built-in interactivity features make it easy to create engaging charts without deep programming knowledge.

  • vega:

    Vega's declarative syntax allows users to define visualizations in JSON format, which can be easier to understand for those familiar with data representation rather than programming.

  • @observablehq/plot:

    @observablehq/plot is designed for simplicity, allowing users to create visualizations with minimal code. Its API is intuitive, making it accessible for users without extensive programming experience.

Customization

  • recharts:

    Recharts provides customization options through props, allowing developers to easily adjust styles and behaviors of components. It integrates well with React's state management for dynamic updates.

  • chart.js:

    Chart.js allows for basic customization of charts, including colors, labels, and tooltips. However, it may not support as many advanced features as other libraries.

  • d3:

    D3.js excels in customization, allowing developers to create highly tailored visualizations. Users can manipulate every aspect of the chart, from shapes to transitions, providing unparalleled flexibility.

  • echarts:

    ECharts offers a wide range of customization options, including themes, styles, and interactions. Developers can create visually stunning charts that fit their application's design requirements.

  • apexcharts:

    ApexCharts provides extensive customization options, allowing developers to modify chart styles, colors, and animations. It supports various themes and can be easily tailored to fit application designs.

  • victory:

    Victory offers a high degree of customization through its components, allowing developers to style charts and add custom behaviors easily. Its modular approach makes it adaptable for various use cases.

  • plotly.js:

    Plotly.js allows for extensive customization of charts, including layout, colors, and interactivity. Users can create complex visualizations that are both functional and aesthetically pleasing.

  • vega:

    Vega allows for deep customization through its JSON specification, enabling users to define visual properties and interactions in detail. This makes it suitable for complex visualizations.

  • @observablehq/plot:

    @observablehq/plot offers basic customization options, focusing on quick visualizations rather than extensive styling. Users can easily modify colors and labels but may find limitations in advanced customization.

Performance

  • recharts:

    Recharts performs well for moderate datasets, leveraging React's rendering capabilities. However, performance may decline with very large datasets due to re-rendering issues.

  • chart.js:

    Chart.js performs well for basic charts but may struggle with very large datasets or complex visualizations due to its simplicity and lightweight nature.

  • d3:

    D3.js can handle large datasets effectively, but performance depends on how well the developer manages the DOM and data binding. Proper optimization techniques are essential for high performance.

  • echarts:

    ECharts is designed for high performance, capable of rendering large datasets with ease. Its optimization techniques ensure smooth interactions and fast rendering times.

  • apexcharts:

    ApexCharts is built for performance, handling large datasets efficiently and providing smooth interactions, making it suitable for real-time data visualizations.

  • victory:

    Victory performs well within React applications, but like Recharts, it may face performance challenges with very large datasets due to its component-based architecture.

  • plotly.js:

    Plotly.js performs well with moderate datasets but can experience performance issues with very large datasets due to its extensive interactivity features.

  • vega:

    Vega is optimized for performance, particularly with complex visualizations. It efficiently handles large datasets and provides smooth interactions.

  • @observablehq/plot:

    @observablehq/plot is optimized for exploratory analysis, but may not perform as well with very large datasets compared to other libraries that are designed for high performance.

Interactivity

  • recharts:

    Recharts provides interactive features like tooltips and event handling, making it easy to create responsive charts within React applications.

  • chart.js:

    Chart.js supports basic interactivity, such as tooltips and hover effects, but lacks more advanced interactive capabilities found in other libraries.

  • d3:

    D3.js allows for extensive interactivity, enabling developers to create custom interactions and animations tailored to their specific needs. This makes it suitable for complex visualizations.

  • echarts:

    ECharts provides rich interactivity, including tooltips, data zooming, and dynamic updates, making it a great choice for interactive dashboards and applications.

  • apexcharts:

    ApexCharts excels in interactivity, offering features like tooltips, zooming, and real-time updates, making it ideal for dynamic dashboards.

  • victory:

    Victory offers built-in interactivity, including tooltips and animations, making it easy to create engaging charts in React applications.

  • plotly.js:

    Plotly.js is known for its high interactivity, supporting features like zooming, panning, and hover effects, making it suitable for analytical applications.

  • vega:

    Vega supports interactivity through its declarative syntax, allowing users to define interactive behaviors and transitions easily.

  • @observablehq/plot:

    @observablehq/plot provides basic interactivity, allowing users to hover over data points for more information, but lacks advanced interactive features.

How to Choose: recharts vs chart.js vs d3 vs echarts vs apexcharts vs victory vs plotly.js vs vega vs @observablehq/plot
  • recharts:

    Choose Recharts if you are working within a React environment and need a library that integrates seamlessly with React components. It provides a simple API and is built on SVG, making it easy to create responsive charts.

  • chart.js:

    Choose Chart.js for its simplicity and ease of use. It is perfect for developers who need to create basic charts quickly without extensive customization. It supports various chart types and is lightweight, making it suitable for smaller projects.

  • d3:

    Choose D3.js if you require maximum flexibility and control over your visualizations. It is a powerful library that allows for the creation of complex, data-driven visualizations and is ideal for advanced users who want to manipulate the DOM directly and create custom visualizations.

  • echarts:

    Choose ECharts if you need a library that excels in handling large datasets and provides rich visualizations with a focus on performance. It is particularly useful for building interactive charts and dashboards that require dynamic data updates.

  • apexcharts:

    Choose ApexCharts if you are looking for a modern and responsive charting library that offers a wide range of chart types and is easy to integrate with frameworks like React, Vue, and Angular. It is great for building interactive dashboards with minimal configuration.

  • victory:

    Choose Victory if you are looking for a modular charting library specifically designed for React applications. It provides a set of composable components that allow for easy customization and integration into React projects.

  • plotly.js:

    Choose Plotly.js if you need a library that supports both 2D and 3D visualizations and offers extensive interactivity and customization options. It is suitable for scientific and analytical applications where detailed data representation is crucial.

  • vega:

    Choose Vega if you want a declarative approach to building visualizations. It is suitable for users who prefer to define visualizations in a JSON format and need a library that can handle complex data transformations and interactions.

  • @observablehq/plot:

    Choose @observablehq/plot if you need a library that emphasizes simplicity and ease of use for exploratory data analysis. It is particularly well-suited for creating quick visualizations in a notebook-style environment, making it ideal for data scientists and analysts.

README for recharts

Recharts

storybook 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.

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

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/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-2023 Recharts Group.