apexcharts
Advanced tools
ApexCharts is a modern charting library that helps developers create beautiful and interactive visualizations for web applications. It supports a wide range of chart types and is highly customizable, making it suitable for various data visualization needs.
Line Chart
This code creates a simple line chart to visualize sales data over a period of months. The `series` array contains the data points, and the `xaxis` object defines the categories for the x-axis.
const options = { chart: { type: 'line' }, series: [{ name: 'sales', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }], xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'] } }; const chart = new ApexCharts(document.querySelector('#chart'), options); chart.render();Bar Chart
This code creates a bar chart to visualize revenue data across different quarters. The `series` array contains the data points, and the `xaxis` object defines the categories for the x-axis.
const options = { chart: { type: 'bar' }, series: [{ name: 'revenue', data: [10, 15, 25, 30, 40, 45, 50, 55, 60] }], xaxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9'] } }; const chart = new ApexCharts(document.querySelector('#chart'), options); chart.render();Pie Chart
This code creates a pie chart to visualize the distribution of data among different teams. The `series` array contains the data points, and the `labels` array defines the labels for each slice of the pie.
const options = { chart: { type: 'pie' }, series: [44, 55, 13, 43, 22], labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'] }; const chart = new ApexCharts(document.querySelector('#chart'), options); chart.render();Area Chart
This code creates an area chart to visualize temperature data over a week. The `series` array contains the data points, and the `xaxis` object defines the categories for the x-axis.
const options = { chart: { type: 'area' }, series: [{ name: 'temperature', data: [31, 40, 28, 51, 42, 109, 100] }], xaxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } }; const chart = new ApexCharts(document.querySelector('#chart'), options); chart.render();Scatter Plot
This code creates a scatter plot to visualize two sets of sample data. The `series` array contains the data points for each sample, and the `xaxis` and `yaxis` objects define the tick amounts for the axes.
const options = { chart: { type: 'scatter' }, series: [{ name: 'Sample A', data: [[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1]] }, { name: 'Sample B', data: [[36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4]] }], xaxis: { tickAmount: 10 }, yaxis: { tickAmount: 7 } }; const chart = new ApexCharts(document.querySelector('#chart'), options); chart.render();Chart.js is a popular open-source library for creating simple yet flexible charts. It supports a variety of chart types and is known for its ease of use and integration. Compared to ApexCharts, Chart.js offers a more straightforward API but may lack some of the advanced customization options.
Highcharts is a powerful charting library that provides a wide range of chart types and extensive customization options. It is suitable for complex data visualization needs and offers features like exporting and accessibility support. Highcharts is more feature-rich compared to ApexCharts but comes with a steeper learning curve.
D3.js is a highly flexible and powerful library for creating data-driven visualizations. It allows for fine-grained control over every aspect of the chart, making it suitable for custom and complex visualizations. However, D3.js has a steeper learning curve and requires more effort to create basic charts compared to ApexCharts.
Plotly.js is a versatile charting library that supports a wide range of chart types and interactive features. It is known for its high-quality visualizations and ease of use. Plotly.js offers more advanced interactivity and data exploration features compared to ApexCharts.
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. ApexCharts is an MIT licensed open-source project that can be used in commercial and non-commercial projects.
 Firefox |  Chrome |  Safari |  Edge |  IE11 |
|---|---|---|---|---|
| 31+ ✔ | 35+ ✔ | 6+ ✔ | Edge ✔ | (IE11) ✔ |
npm install apexcharts --save
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
Integrate easily with 3rd party frameworks
Useful links to wrappers other than the popular frameworks mentioned above
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()
This will render the following chart
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.
Zoom, Pan, Scroll through data. Make selections and load other charts using those selections. An example showing some interactivity
Another approach to Drill down charts where one selection updates the data of other charts. An example of loading dynamic series into charts is shown below
Annotations allows 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.
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 it's own y-axis.
Use a candlestick chart (a common financial chart) to describe price changes of a security, derivative, or currency. Below image show how you can use another chart as a brush/preview-pane which acts as a handle to browse the main candlestick chart.
Use Heatmaps to represent data through colors and shades. Frequently used with bigger data collections, they are valuable for recognizing patterns and area of focus.
The tiny gauges are an important part of a dashboard and are useful in displaying single series data. A demo of these gauges:
Utilize sparklines to indicate trends in data, for example, occasional increments or declines, monetary cycles, or to feature most extreme and least values:
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
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/
If you need to make it work with IE11, you need to include these polyfills before including ApexCharts
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.
npm run build
Head over to the documentation section to read more about how to use different kinds of charts and explore all options.
Email: info@apexcharts.com
Twitter: @apexcharts
Facebook: fb.com/apexcharts
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.
ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.
FAQs
A JavaScript Chart Library
The npm package apexcharts receives a total of 551,994 weekly downloads. As such, apexcharts popularity was classified as popular.
We found that apexcharts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.