{"id":10504,"library":"apexcharts","title":"ApexCharts","description":"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.","status":"active","version":"5.10.6","language":"javascript","source_language":"en","source_url":"https://github.com/apexcharts/apexcharts.js","tags":["javascript","charts","graphs","visualizations","data","typescript"],"install":[{"cmd":"npm install apexcharts","lang":"bash","label":"npm"},{"cmd":"yarn add apexcharts","lang":"bash","label":"yarn"},{"cmd":"pnpm add apexcharts","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const ApexCharts = require('apexcharts')","symbol":"ApexCharts","correct":"import ApexCharts from 'apexcharts'"},{"note":"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.","wrong":"import ApexCharts from 'apexcharts'","symbol":"ApexCharts","correct":"import ApexCharts from 'apexcharts/ssr'"},{"note":"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.","wrong":"import ApexCharts from 'apexcharts'","symbol":"ApexCharts (modular core)","correct":"import ApexCharts from 'apexcharts/core'; import 'apexcharts/line';"},{"note":"For TypeScript, use `import type` for importing the `ApexOptions` interface to ensure it's removed during compilation, preventing unnecessary runtime code.","wrong":"import { ApexOptions } from 'apexcharts'","symbol":"ChartOptions (TypeScript type)","correct":"import type { ApexOptions } from 'apexcharts'"}],"quickstart":{"code":"import ApexCharts from 'apexcharts';\n\nconst chartElement = document.querySelector('#chart');\n\nconst options = {\n  chart: {\n    type: 'bar',\n    height: 350\n  },\n  series: [\n    {\n      name: 'sales',\n      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]\n    }\n  ],\n  xaxis: {\n    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]\n  },\n  title: {\n    text: 'Basic Bar Chart Example',\n    align: 'left'\n  }\n};\n\nif (chartElement) {\n  const chart = new ApexCharts(chartElement, options);\n  chart.render();\n} else {\n  console.error('Chart element with id \"#chart\" not found.');\n}\n\n// Example of updating series data (requires a chart instance already rendered)\n// setTimeout(() => {\n//   chart.updateSeries([{ data: [20, 50, 45, 30, 70, 55, 80, 100, 110] }]);\n// }, 5000);\n","lang":"typescript","description":"This quickstart code initializes and renders a basic bar chart using ApexCharts in a client-side browser environment, demonstrating chart creation with minimal configuration."},"warnings":[{"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.","message":"Older 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.","severity":"breaking","affected_versions":"<5.10.2"},{"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.","message":"When 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.","severity":"gotcha","affected_versions":">=5.7.0"},{"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.","message":"Since 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.","severity":"gotcha","affected_versions":">=5.7.0"},{"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.","message":"Locale 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.","severity":"deprecated","affected_versions":"<5.10.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"Error: Chart type not registered (or similar runtime error indicating missing chart type)"},{"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.","cause":"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.","error":"ReferenceError: SVG is not a function"},{"fix":"Upgrade ApexCharts to version 5.10.6 or newer to resolve this specific visual regression.","cause":"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)","error":"Legend stays greyed out after re-enabling hidden series (visual bug)"}],"ecosystem":"npm"}