README

<a href="https://github.com/apexcharts/apexcharts.js/blob/main/LICENSE"></a> <a href="https://www.jsdelivr.com/package/npm/apexcharts"></a>

Why ApexCharts

• 16+ chart types out of the box — line, area, bar, column, pie, donut, radar, heatmap, treemap, candlestick, boxplot, funnel, pyramid, gauge and more
• SSR support for Next.js, Nuxt, SvelteKit, Astro, and other meta-frameworks — render real SVG on the server, hydrate on the client
• Tree-shakable — import only the chart types and features you need; typical bundles are 30–60% smaller than the full build
• TypeScript-first — full type definitions ship with the package, no @types/* install needed
• Zero runtime dependencies — no React/Vue/D3 required; works in any framework or vanilla JS
• Accessibility — keyboard navigation and ARIA support built in
• Free for most users — see License

Install

npm install apexcharts

Or via CDN:

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Quick start

import ApexCharts from 'apexcharts'

const chart = new ApexCharts(document.querySelector('#chart'), {
  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] }
})

chart.render()

Browse 100+ ready-to-use samples — copy, paste, ship.

Chart types

• Line · Area · Range Area
• Bar · Column · Range Bar / Timeline
• Scatter · Bubble
• Candlestick · BoxPlot
• Pie · Donut · Polar Area · Radial Bar / Gauge
• Radar · Heatmap · Treemap
• Funnel

Combine any of the above as mixed/combo charts, stacked variants, sparklines, or synchronized multi-chart layouts.

Framework wrappers

Official:

• React — react-apexcharts
• Vue 3 — vue3-apexcharts
• Vue 2 — vue-apexcharts
• Angular — ng-apexcharts
• Blazor — Blazor-ApexCharts
• Stencil — stencil-apexcharts

Community:

• Svelte — svelte-apexcharts
• Ruby — apexcharts.rb
• Laravel — larapex-charts
• R — apexcharter

Server-side rendering

Render chart HTML on the server, then hydrate in the browser. Works with Next.js, Nuxt, SvelteKit, Astro, Remix, and any Node-based framework.

// Server
import ApexCharts from 'apexcharts/ssr'

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

// Returns hydration-ready HTML with embedded SVG

// Client
import ApexCharts from 'apexcharts/client'

ApexCharts.hydrate(document.getElementById('my-chart'))
// or: ApexCharts.hydrateAll()

No more dynamic(() => import(...), { ssr: false }) workarounds — the chart renders on the server and becomes interactive on hydration.

Tree-shaking — ship only what you use

By default import ApexCharts from 'apexcharts' includes everything. For smaller bundles, import from apexcharts/core and add only what you need:

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

// Chart types (match the value of 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

See the tree-shaking guide for the complete list of entry points.

Browser support

ApexCharts works in all modern evergreen browsers (Chrome, Firefox, Safari, Edge). For server-side rendering, Node.js 18+ is required.

Documentation

• Getting started
• Live demo gallery

Contributing

npm install
npm run dev     # vite build --watch
npm test        # e2e + unit

See CONTRIBUTING.md for setup, coding conventions, and PR guidelines.

License

ApexCharts uses a revenue-based license:

• Free for individuals, and organizations with under $2M USD in annual gross revenue — including commercial and internal use. No registration required.
• Commercial license required for organizations at or above $2M USD annual gross revenue.

Full terms: apexcharts.com/license

Need an enterprise data grid?

We've partnered with Infragistics, creators of Ignite UI — high-performance data grids that handle unlimited rows and columns, with custom templates and real-time updates.

Available for:

Angular · React · Blazor · Web Components · jQuery

Contact

• Issues & bugs: GitHub Issues
• Questions: GitHub Discussions
• Email: [email protected]