<img src="https://apexcharts.com/media/apexcharts-logo.png"> <a href="https://travis-ci.com/apexcharts/apexcharts.js"><img src="https://api.travis-ci.com/apexcharts/apexcharts.js.svg?branch=master" alt="build" /></a> <img alt="downloads" src="https://img.shields.io/npm/dm/apexcharts.svg"/> <a href="https://www.npmjs.com/package/apexcharts"><img src="https://img.shields.io/npm/v/apexcharts.svg" alt="ver"></a> <img alt="size" src="https://badgen.net/bundlephobia/min/apexcharts?label=size"> <a href="https://cdn.jsdelivr.net/npm/apexcharts@3.12.0/types/apexcharts.d.ts"><img src="https://badgen.net/npm/types/apexcharts"/></a> <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="prettier"></a> <a href="https://www.jsdelivr.com/package/npm/apexcharts"><img src="https://data.jsdelivr.com/v1/package/npm/apexcharts/badge" alt="jsdelivr" /></a> <a href="https://twitter.com/intent/tweet?text=Create%20visualizations%20with%20this%20free%20and%20open-source%20JavaScript%20Chart%20library&url=https://www.apexcharts.com&hashtags=javascript,charts,visualizations,developers,apexcharts"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a> 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. <a href="https://apexcharts.com/javascript-chart-demos/"><img src="https://apexcharts.com/media/apexcharts-banner.png"></a>

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

vue-apexcharts
react-apexcharts
ng-apexcharts - Plugin by Morris Janatzek
stencil-apexcharts

Unofficial Wrappers

Useful links to wrappers other than the popular frameworks mentioned above

apexcharter - Htmlwidget for ApexCharts
apexcharts.rb - Ruby wrapper for ApexCharts
larapex-charts - Laravel wrapper for ApexCharts
blazor-apexcharts - Blazor wrapper for ApexCharts demo
svelte-apexcharts - Svelte wrapper for ApexCharts

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

Tree-shaking — ship only what you use

By default import ApexCharts from 'apexcharts' includes everything. If you want a smaller bundle, import from apexcharts/core and add only the chart types and features you need:

import ApexCharts from 'apexcharts/core'   // bare class — no chart types, no features

// Import by the exact chart type name you use in { chart: { type: '...' } }
import 'apexcharts/line'
import 'apexcharts/bar'
// import 'apexcharts/area'
// import 'apexcharts/scatter'

// Optional features
import 'apexcharts/features/legend'
import 'apexcharts/features/toolbar'      // zoom/pan toolbar
// import 'apexcharts/features/exports'      // SVG/PNG/CSV download
// import 'apexcharts/features/annotations'
// import 'apexcharts/features/keyboard'     // keyboard navigation

Vite users: Vite's dependency pre-bundler can create two separate copies of ApexCharts, causing "chart type X is not registered" errors even when the import is present. Fix this by listing all apexcharts sub-entries in optimizeDeps.include:

// vite.config.js
export default {
  optimizeDeps: {
    include: [
      'apexcharts/core',
      'apexcharts/line',   // add only the ones you import
      'apexcharts/bar',
      'apexcharts/features/legend',
      'apexcharts/features/toolbar',
      // ...
    ],
  },
}

See tree-shaking for the full guide.

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

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

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.

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.

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.

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.

Gauges

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

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:

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:

<a target

Apexcharts.js

Install / Use

README