apexcharts

library5.10.6jsnpmunverified

ApexCharts is a modern, open-source JavaScript charting library for building interactive data visualizations. It provides a wide array of over a dozen chart types, offering responsive and feature-rich charts suitable for applications and dashboards. The current stable version is 5.10.6, with frequent patch releases addressing bugs and introducing minor features, sometimes on a weekly or bi-weekly cadence. Key differentiators include its extensive chart catalogue, built-in server-side rendering (SSR) support, modular entry points for efficient tree-shaking, and accessibility features like color-blind modes. It also offers official wrappers for popular frameworks like React, Vue, and Angular, simplifying integration into various web environments.

serialization web-framework

npm install apexcharts

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · APEXCHARTS

apexcharts

serializationjavascriptv5.10.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ApexCharts

✓ import ApexCharts from 'apexcharts'

✗ const ApexCharts = require('apexcharts')

This is the standard client-side import for the full bundle. CommonJS `require` should be avoided in modern projects due to potential tree-shaking issues, especially with older bundler configurations.

ApexCharts

✓ import ApexCharts from 'apexcharts/ssr'

✗ import ApexCharts from 'apexcharts'

Use this specific entry point for Server-Side Rendering (SSR) environments. Attempting to use the default client-side import in Node.js for SSR will likely lead to errors.

ApexCharts (modular core)

✓ import ApexCharts from 'apexcharts/core'; import 'apexcharts/line';

✗ import ApexCharts from 'apexcharts'

Since v5.7.0, ApexCharts supports feature-level tree-shaking. Import `apexcharts/core` for the base functionality, then add specific chart types (e.g., `apexcharts/line`) and features (e.g., `apexcharts/features/legend`) as needed to reduce bundle size. Using the full `apexcharts` import negates this optimization.

ChartOptions (TypeScript type)

✓ import type { ApexOptions } from 'apexcharts'

✗ import { ApexOptions } from 'apexcharts'

For TypeScript, use `import type` for importing the `ApexOptions` interface to ensure it's removed during compilation, preventing unnecessary runtime code.

This quickstart code initializes and renders a basic bar chart using ApexCharts in a client-side browser environment, demonstrating chart creation with minimal configuration.

import ApexCharts from 'apexcharts'; const chartElement = document.querySelector('#chart'); const options = { chart: { type: 'bar', height: 350 }, series: [ { name: 'sales', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] } ], xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }, title: { text: 'Basic Bar Chart Example', align: 'left' } }; if (chartElement) { const chart = new ApexCharts(chartElement, options); chart.render(); } else { console.error('Chart element with id "#chart" not found.'); } // Example of updating series data (requires a chart instance already rendered) // setTimeout(() => { // chart.updateSeries([{ data: [20, 50, 45, 30, 70, 55, 80, 100, 110] }]); // }, 5000);

Debug

Known issues

breakingOlder bundler configurations or mixed CJS/ESM imports can lead to silent tree-shaking issues, where chart types or features are unexpectedly omitted from production builds, resulting in runtime errors or missing functionality. This was particularly prevalent before v5.10.2.

fix

Ensure your `package.json` correctly lists `sideEffects` for `dist/*.esm.js` and `dist/features/*.esm.js`. For projects mixing module systems, consolidate to ESM where possible or ensure bundler `optimizeDeps` is configured to prevent duplicate module instances. Since v5.10.1, the chart registry is more robust to duplicate instances, but proper bundling is still recommended.

affects: <5.10.2

gotchaWhen using ApexCharts in a Server-Side Rendering (SSR) environment (e.g., Next.js, Nuxt), the correct SSR-specific import path (`apexcharts/ssr`) must be used. Using the standard client-side import can lead to errors like 'SVG is not a function' or other Node.js environment-specific crashes.

fix

Change `import ApexCharts from 'apexcharts'` to `import ApexCharts from 'apexcharts/ssr'` for all SSR related code paths. Verify your SSR configuration to ensure `global.SVG` and other browser globals are correctly polyfilled or mocked if necessary.

affects: >=5.7.0

gotchaSince v5.7.0, ApexCharts introduced feature-level tree-shaking and in v5.10.0, per-type modular entry points. Importing the entire library (`import ApexCharts from 'apexcharts'`) will include all chart types and features, negating the bundle size benefits of modular imports.

fix

To optimize bundle size, import the core library (`import ApexCharts from 'apexcharts/core'`) and then explicitly import only the chart types (e.g., `import 'apexcharts/line'`) and optional features (e.g., `import 'apexcharts/features/legend'`) your application uses.

affects: >=5.7.0

deprecatedLocale file names were renamed to their correct ISO codes in v5.10.4. Older, incorrect filenames might still function but are considered deprecated and could be removed in future major versions.

fix

Update any custom locale imports or configurations to use the correct ISO codes (e.g., `sr`, `sv`, `uk`) for Serbian, Swedish, and Ukrainian locales.

affects: <5.10.4

Errors

Common errors & fixes

Error: Chart type not registered (or similar runtime error indicating missing chart type)

This usually occurs when bundlers incorrectly tree-shake necessary chart types or when multiple instances of the ApexCharts module exist, causing the chart registry to be out of sync.

fix

Ensure `sideEffects` are properly configured in `package.json` for `apexcharts` (check v5.10.2 release notes for patterns). If using modular imports, make sure `import 'apexcharts/<chart-type>'` statements are not inadvertently tree-shaken. For bundler issues with duplicate modules (e.g., CJS/ESM mix), try to unify module systems or configure `optimizeDeps` if using Vite.

ReferenceError: SVG is not a function

This error occurs in Node.js environments (like SSR) when the client-side ApexCharts module is used instead of the SSR-specific one, as the client-side module expects browser APIs like `SVGElement` to be present.

fix

Ensure you are importing `ApexCharts` from `apexcharts/ssr` for all server-side rendering logic. If the issue persists, check your SSR framework's documentation for mocking browser globals.

Legend stays greyed out after re-enabling hidden series (visual bug)

A regression introduced in a previous version caused legend items to remain visually disabled even after their corresponding series were re-enabled. (Fixed in v5.10.6)

fix

Upgrade ApexCharts to version 5.10.6 or newer to resolve this specific visual regression.

Upgrade

Version history

5.10.6latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

27 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/apexcharts/apexcharts.js ↗

packagehttps://www.npmjs.com/package/apexcharts ↗

homepagehttps://apexcharts.com ↗