apexcharts vs recharts
Data Visualization Libraries
Search packages..
apexchartsrechartsSimilar Packages:

Data Visualization Libraries

Data visualization libraries are tools that help developers create graphical representations of data in web applications. These libraries provide a wide range of chart types, such as line charts, bar charts, pie charts, and more, allowing users to present data in a visually appealing and easily understandable manner. They often come with features like interactivity, animations, and customization options, making it easier to convey complex information effectively. apexcharts is a modern charting library that offers a simple API, responsive designs, and a variety of chart types, while recharts is a composable charting library built on React, providing a declarative approach to creating charts with a focus on reusability and customization.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
apexcharts015,0765.38 MB3377 days agoSEE LICENSE IN LICENSE
recharts026,7006.38 MB452a month agoMIT

Feature Comparison: apexcharts vs recharts

Chart Types

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

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

Customization

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

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

Interactivity

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

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

Integration

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

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

Documentation and Community

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

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

Ease of Use: Code Examples

  • 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>
  • 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;

How to Choose: apexcharts vs recharts

  • apexcharts:

    Choose apexcharts if you need a feature-rich, easy-to-use charting library that supports a wide range of chart types and is highly customizable. It is suitable for both simple and complex data visualizations, with excellent documentation and responsive designs.

  • recharts:

    Choose recharts if you are working on a React project and prefer a library that is built with React components. It offers a modular and composable approach to creating charts, making it easy to integrate and customize within React applications.

Similar Npm Packages to apexcharts

apexcharts is a modern charting library that helps developers create beautiful and interactive visualizations for web applications. It is designed to be easy to use and integrates seamlessly with frameworks like React, Vue, and Angular. ApexCharts offers a wide variety of chart types, including line, bar, area, pie, and more, along with features like animations, tooltips, and responsive design. This makes it a popular choice for developers looking to add dynamic data visualizations to their applications.

However, there are several alternatives to ApexCharts that also provide robust charting capabilities:

  • chart.js is a widely-used open-source JavaScript library that allows developers to create simple yet flexible charts. It supports various chart types and is known for its ease of use and lightweight nature. Chart.js is particularly suitable for developers who need a straightforward solution for creating basic charts without the overhead of more complex libraries. Its simplicity and performance make it a great choice for projects that require quick and efficient charting solutions.

  • d3 (Data-Driven Documents) is a powerful JavaScript library for producing dynamic and interactive data visualizations in web browsers. Unlike other charting libraries, D3 provides a low-level API that allows for complete control over the visual representation of data. While it has a steeper learning curve compared to libraries like ApexCharts and Chart.js, D3's flexibility makes it an excellent choice for developers who need to create highly customized visualizations or work with complex data sets.

  • highcharts is a feature-rich charting library that offers a wide range of chart types and extensive customization options. It is particularly well-suited for enterprise applications that require advanced charting capabilities, such as exporting charts, annotations, and real-time updates. Highcharts is known for its performance and ease of integration with various frameworks, making it a popular choice for businesses looking to implement sophisticated data visualizations.

To explore how ApexCharts compares with Chart.js, D3, and Highcharts, check out the comparison: Comparing apexcharts vs chart.js vs d3 vs highcharts.

Similar Npm Packages to recharts

recharts is a composable charting library built on React components, designed to create responsive and customizable charts with ease. It leverages the power of SVG to render charts and provides a simple API that allows developers to create a variety of chart types quickly. Recharts is particularly well-suited for React applications, enabling seamless integration and a declarative approach to building visualizations.

While Recharts is a robust option for creating charts in React, there are other libraries available that also provide powerful charting capabilities. Here are a couple of notable alternatives:

  • chart.js is a popular JavaScript library for creating charts and visualizations. It is highly versatile and supports a wide range of chart types, including line, bar, radar, doughnut, and more. Chart.js is known for its simplicity and ease of use, making it a great choice for developers who want to quickly implement charts without a steep learning curve. It also offers responsive design features and can be easily integrated into various frameworks, including React, Angular, and Vue.

  • d3 (Data-Driven Documents) is a powerful JavaScript library for producing dynamic, interactive data visualizations in web browsers. Unlike Recharts and Chart.js, D3 provides low-level control over the rendering of charts and visualizations, allowing for highly customized and complex visual representations of data. While D3 has a steeper learning curve and requires a deeper understanding of SVG and the DOM, it is incredibly flexible and can be used to create virtually any type of visualization.

To see how Recharts compares with Chart.js and D3, check out the comparison: Comparing chart.js vs d3 vs recharts.

README for apexcharts

build downloads ver size prettier jsdelivr

A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed with the features that you expect, ApexCharts includes over a dozen chart types that deliver beautiful, responsive visualizations in your apps and dashboards.


Download and Installation

Installing via npm
npm install apexcharts --save
Direct <script> include
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Wrappers for Vue/React/Angular/Stencil

Integrate easily with 3rd party frameworks

Unofficial Wrappers

Useful links to wrappers other than the popular frameworks mentioned above

Usage

Client-Side (Browser)

import ApexCharts from 'apexcharts'

To create a basic bar chart with minimal configuration, write as follows:

var options = {
  chart: {
    type: 'bar'
  },
  series: [
    {
      name: 'sales',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }
  ],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

Server-Side Rendering (SSR)

ApexCharts now supports SSR for Next.js, Nuxt, SvelteKit, Astro, and other meta-frameworks:

import ApexCharts from 'apexcharts/ssr'

const chartHTML = await ApexCharts.renderToHTML({
  series: [{ data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }],
  chart: { type: 'bar' },
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }
}, {
  width: 500,
  height: 300
})

// Returns hydration-ready HTML with embedded SVG

// Client-side hydration (makes chart interactive)
import ApexCharts from 'apexcharts/client'

// Hydrate specific chart
ApexCharts.hydrate(document.getElementById('my-chart'))

// Or hydrate all charts on the page
ApexCharts.hydrateAll()

This will render the following chart

A little more than the basic

You can create a combination of different charts, sync them and give your desired look with unlimited possibilities. Below is an example of synchronized charts with github style.

Interactivity

Zoom, Pan, and Scroll through data. Make selections and load other charts using those selections. An example showing some interactivity

interactive chart

Dynamic Series Update

Another approach is to Drill down charts where one selection updates the data of other charts. An example of loading dynamic series into charts is shown below

dynamic-loading-chart

Annotations

Annotations allow you to write custom text on specific values or on axes values. Valuable to expand the visual appeal of your chart and make it more informative.

annotations

Mixed Charts

You can combine more than one chart type to create a combo/mixed chart. Possible combinations can be line/area/column together in a single chart. Each chart type can have its own y-axis.

annotations

Candlestick

Use a candlestick chart (a common financial chart) to describe price changes of a security, derivative, or currency. The below image shows how you can use another chart as a brush/preview pane which acts as a handle to browse the main candlestick chart.

candlestick

Heatmaps

Use Heatmaps to represent data through colors and shades. Frequently used with bigger data collections, they are valuable for recognizing patterns and areas of focus.

heatmap

Gauges

The tiny gauges are an important part of a dashboard and are useful in displaying single-series data. A demo of these gauges:

radialbar-chart

Sparklines

Utilize sparklines to indicate trends in data, for example, occasional increments or declines, monetary cycles, or to feature the most extreme and least values:

sparkline-chart

Need Advanced Data Grid for your next project?

We partnered with Infragistics, creators of the fastest data grids on the planet! Ignite UI Grids can handle unlimited rows and columns of data while providing access to custom templates and real-time data updates.

Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal hand-on coding. The grid is available in most of your favorite frameworks:

Angular Data Grid | React Data Grid | Blazor Data Grid | Web Components DataGrid | jQuery Data Grid

What's included

The download bundle includes the following files and directories providing a minified single file in the dist folder. Every asset including icon/css is bundled in the js itself to avoid loading multiple files.

apexcharts/
├── dist/
│   └── apexcharts.min.js
├── src/
│   ├── assets/
│   ├── charts/
│   ├── modules/
│   ├── utils/
│   └── apexcharts.js
└── samples/

Development

Install dependencies and run the project

npm install
npm run dev

This will start the webpack watch and any changes you make to src folder will auto-compile and output will be produced in the dist folder.

More details in Contributing Guidelines.

Minifying the src

npm run build

Where do I go next?

Head over to the documentation section to read more about how to use different kinds of charts and explore all options.

Contacts

Email: info@apexcharts.com

Twitter: @apexcharts

Facebook: fb.com/apexcharts

Dependency

ApexCharts uses SVG.js for drawing shapes, animations, applying svg filters, and a lot more under the hood. The library is bundled in the final build file, so you don't need to include it.

License

ApexCharts is offered under a dual-license model to support individuals, startups, and commercial products of all sizes. Read full license agreements here: https://apexcharts.com/license

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.