• Legend stays greyed out after re-enabling hidden series; Fixed a regression where toggling a hidden series back on via the legend would leave the legend item in a greyed-out/disabled visual state. (#5189, #5196)
• Focus outline visible on mouse click; Fixed an issue where clicking anywhere on the chart would show a browser focus outline around the entire chart container. The outline now only appears during keyboard navigation.

• Rename "name" field in renamed locale by @gabriele-v in https://github.com/apexcharts/apexcharts.js/pull/5188
• fix: x-axis labels not updating after zoom reset by @Harsh3006 in https://github.com/apexcharts/apexcharts.js/pull/5194
• Fix for data labels on first/last bars hidden in mixed charts due to missing barPad offset. by @Krishna-Chidrawar in https://github.com/apexcharts/apexcharts.js/pull/5192
• fix: x-axis annotations missing on line/area/scatter charts (5.10.4 regression)

• @Harsh3006 made their first contribution in https://github.com/apexcharts/apexcharts.js/pull/5194
• @Krishna-Chidrawar made their first contribution in https://github.com/apexcharts/apexcharts.js/pull/5192

Full Changelog: https://github.com/apexcharts/apexcharts.js/compare/v5.10.4...v5.10.5

• CSS variable colors — Pass 'var(--my-color)' directly as a chart color. Swap your entire palette at runtime with a single CSS attribute change. (#5185) Thanks to @codecalm
• New locales — Bulgarian (bg) and Romanian (ro) added. Serbian, Swedish, and Ukrainian locale files were also renamed to their correct ISO codes (sr, sv, uk). (#5186) Thanks to @gabriele-v

• Datetime x-axis ticks — Several edge cases fixed: the first tick was missing when a range started exactly on a minute or second boundary; charts spanning midnight showed wrong dates; short-month rollovers (e.g. Feb 28 → Mar 1) were off by a day.
• Screen reader duplicate label — Charts were announcing their title twice. (#5183)

• Faster updates — updateOptions() and updateSeries() no longer rebuild internal modules from scratch on every call, reducing re-render overhead on dashboards with frequent data refreshes. Large datasets also benefit from automatic LTTB downsampling.

• Tree-shaking: ESM entry points were incorrectly eliminated by bundlers

  dist/*.esm.js and dist/features/*.esm.js were missing from the sideEffects field in package.json. Bundlers such as Webpack and Rollup treat files not listed as having side effects as safe to drop when they are not explicitly imported, which caused chart type and feature registrations to be silently tree-shaken away in production builds. Adding both glob patterns ensures the self-registering ESM bundles are always retained.

• SSR: Bar/column charts rendered duplicate elements in renderToString() (1b4bcb1f)

  SSRElement.appendChild and insertBefore were unconditionally pushing the child onto the children array without checking whether the child already had a parent. Because Bar.js creates elDataLabelsWrap, elGoalsMarkers, and elBarShadows once per series but calls elSeries.add() on every data-point iteration, the SSR virtual DOM accumulated N×N bar paths and datalabel groups instead of N. The fix mirrors standard browser DOM move semantics: if a node already has a parent it is detached from that parent before being appended. This affects both appendChild and insertBefore.

Problem: When a bundler (Vite, webpack, etc.) accidentally creates two separate copies of the ApexCharts module - for example when mixing CJS and ESM imports, or when optimizeDeps is not configured - ApexCharts.use() would write to one module's registry while the chart renderer read from another. The chart type was effectively never registered, causing a runtime error.

Fix: The chart type registry is now stored on globalThis.__apexcharts_registry__ instead of a module-local variable. All module instances share a single registry on the global object, so registration is never silently lost regardless of how many module copies the bundler created.

This is a defense-in-depth fix. For best results, configure your bundler to deduplicate ApexCharts (Vite: add apexcharts to optimizeDeps.include). The globalThis registry ensures the library degrades gracefully even when deduplication is not configured.

A new theme.accessibility config object provides built-in support for color vision deficiencies.

new ApexCharts(el, {
  theme: {
    accessibility: {
      colorBlindMode: 'deuteranopia' // 'deuteranopia' | 'protanopia' | 'tritanopia' | 'highContrast' | ''
    }
  }
})

• colorBlindMode takes full priority over theme.palette and theme.monochrome — no conflict resolution needed.
• TypeScript: ApexTheme.accessibility type added to apexcharts.d.ts.
• highContrast mode adds the apexcharts-high-contrast CSS class to the chart wrapper for custom CSS targeting; it does not mutate any config options.

Previously, each chart-type sub-entry (bar.esm.js, line.esm.js, etc.) and feature sub-entry (features/legend.esm.js, etc.) bundled its own private copy of all shared ApexCharts utilities (Core, Fill, Graphics, Theme, etc.), resulting in significant duplication when multiple sub-entries were loaded together.

v5.9.0 fixes this:

• vite.config.mjs: a coreExternalPlugin externalizes ~60 shared modules from sub-entry builds — they are resolved from apexcharts/core at runtime instead of being re-bundled.
• src/entries/core.js: all shared utilities are re-exported under internal __apex_* names, making them available to sub-entries without additional network requests or parse overhead.
• src/modules/Core.js: removed a direct Legend import that was pulling the entire legend module into the core chunk unnecessarily; uses the already-initialized ctx.legend instance instead.

Impact: When using the tree-shaking API with multiple chart types or features, total JS parse/execute size is significantly reduced. The apexcharts/core bundle is loaded once; all sub-entries share it.

No breaking changes. The full apexcharts.js / apexcharts.esm.js bundles are unaffected. The __apex_* exports in core.js are internal — do not use them in application code.

• core: Core.js no longer constructs a throwaway Legend instance just to measure legend dimensions — it reads from the already-initialized ctx.legend instance, avoiding a redundant import in the core chunk.

dist/
├── apexcharts.js              # UMD bundle (development)
├── apexcharts.min.js          # UMD bundle (minified)
├── apexcharts.esm.js          # ES module — full bundle (all chart types + features)
├── apexcharts.common.js       # CommonJS — full bundle
├── apexcharts.css             # Default styles
├── apexcharts-legend.css      # Legend styles
│
├── core.esm.js                # ES module — bare core (no chart types, no features)
├── core.common.js             # CommonJS — bare core
│
├── bar.esm.js                 # ES module — bar/column/area/line chart type
├── bar.common.js
├── line.esm.js                # ES module — line/area/scatter/bubble chart type
├── line.common.js
├── pie.esm.js                 # ES module — pie/donut chart type
├── pie.common.js
├── radial.esm.js              # ES module — radialBar/polarArea chart type
├── radial.common.js
├── candlestick.esm.js         # ES module — candlestick/boxPlot chart type
├── candlestick.common.js
├── heatmap.esm.js             # ES module — heatmap/treemap chart type
├── heatmap.common.js
│
├── features/
│   ├── all.esm.js             # ES module — all optional features bundled
│   ├── all.common.js
│   ├── annotations.esm.js     # ES module — annotations feature
│   ├── annotations.common.js
│   ├── exports.esm.js         # ES module — SVG/PNG/CSV export feature
│   ├── exports.common.js
│   ├── toolbar.esm.js         # ES module — toolbar/zoom/pan feature
│   ├── toolbar.common.js
│   ├── legend.esm.js          # ES module — legend feature
│   ├── legend.common.js
│   ├── keyboard.esm.js        # ES module — keyboard navigation feature
│   └── keyboard.common.js
│
└── locales/                   # i18n locale JSON files (ar, de, es, fr, ja, zh-cn, ...)

Note: apexcharts.ssr.esm.js and apexcharts.ssr.common.js were removed in v5.9.0. SSR usage should import from apexcharts/core directly and call renderToString / renderToHTML from apexcharts/ssr (available since v5.7.0).

Every public chart type now has its own dedicated entry point matching the chart.type string you already use in config. Previously, users needed to know the internal grouping (e.g. apexcharts/heatmap for treemap charts); now you import by the exact type name.

New entry points:

Example:

import ApexCharts from 'apexcharts/core'
import 'apexcharts/scatter'    // instead of 'apexcharts/line'
import 'apexcharts/donut'      // instead of 'apexcharts/pie'
import 'apexcharts/treemap'    // instead of 'apexcharts/heatmap'
import 'apexcharts/features/legend'

The old grouped entry points (apexcharts/pie, apexcharts/heatmap, apexcharts/radial, etc.) continue to work and register all their previous types — no breaking changes.

When a chart type is not registered (common with tree-shaken builds), the error message now includes a specific hint about Vite's module deduplication as the most likely root cause, and how to fix it via optimizeDeps.include in vite.config.

dist/
├── apexcharts.js              # UMD bundle (development)
├── apexcharts.min.js          # UMD bundle (minified)
├── apexcharts.esm.js          # ES module — full bundle (all chart types + features)
├── apexcharts.common.js       # CommonJS — full bundle
├── apexcharts.css             # Default styles
├── apexcharts-legend.css      # Legend styles
│
├── core.esm.js                # ES module — bare core (no chart types, no features)
├── core.common.js             # CommonJS — bare core
│
├── line.esm.js / line.common.js
├── area.esm.js / area.common.js
├── scatter.esm.js / scatter.common.js
├── bubble.esm.js / bubble.common.js
├── rangeArea.esm.js / rangeArea.common.js
├── bar.esm.js / bar.common.js
├── column.esm.js / column.common.js
├── rangeBar.esm.js / rangeBar.common.js
├── candlestick.esm.js / candlestick.common.js
├── boxPlot.esm.js / boxPlot.common.js
├── pie.esm.js / pie.common.js
├── donut.esm.js / donut.common.js
├── polarArea.esm.js / polarArea.common.js
├── radialBar.esm.js / radialBar.common.js
├── radar.esm.js / radar.common.js
├── heatmap.esm.js / heatmap.common.js
├── treemap.esm.js / treemap.common.js    # new in v5.10.0
│
├── features/
│   ├── all.esm.js / all.common.js
│   ├── annotations.esm.js / annotations.common.js
│   ├── exports.esm.js / exports.common.js
│   ├── toolbar.esm.js / toolbar.common.js
│   ├── legend.esm.js / legend.common.js
│   └── keyboard.esm.js / keyboard.common.js
│
└── locales/                   # i18n locale JSON files (ar, de, es, fr, ja, zh-cn, ...)

• tree-shaking: publish missing dist/core and dist/features/* build artifacts introduced in v5.7.0 (#5177)
• ssr: fix broken SSR import path in src/ssr/index.js (v5.7.1 patch)
• ssr: fix SVG is not a function crash in renderToHTML/renderToString — global.SVG was not registered in the Node.js SSR path (v5.7.1 patch)

ApexCharts now ships modular entry points so you can import only the chart types and features your application actually uses. This can cut bundle size substantially for apps that don't need the full chart catalogue.

// Minimal custom bundle — only what you need
import ApexCharts from 'apexcharts/core'
import 'apexcharts/line'               // line / area / scatter
import 'apexcharts/features/legend'    // optional legend

Chart-type entry points

Feature entry points

The standard import ApexCharts from 'apexcharts' import continues to work unchanged — all chart types and features are included by default.

Charts are now keyboard-accessible. After focusing a chart (tab or click), users can navigate between data points using the arrow keys. The tooltip and active marker update as focus moves between points. This meets WCAG 2.1 AA keyboard interaction requirements.

Enable via the optional feature entry point:

import 'apexcharts/features/keyboard'

Keyboard navigation is included automatically in the full bundle.

SSRRenderer.renderToString(config) and SSRRenderer.renderToHTML(config) now work in Node.js without a browser DOM. Useful for generating static SVG images, pre-rendering chart HTML for emails, or server-driven PDF pipelines.

import SSRRenderer from 'apexcharts/ssr'

const svg = await SSRRenderer.renderToString({
  chart: { type: 'line', width: 600, height: 350 },
  series: [{ name: 'Sales', data: [10, 41, 35, 51, 49, 62] }],
})
// svg is a self-contained SVG string — no window or document required

These changes are transparent to users but lay the groundwork for future performance and bundle-size improvements.

• Modules decoupled from the chart context service-locator (ctx) pattern — required to make tree-shaking work correctly at the module level.
• Replaced legacy ES5 polyfills with native ES6+ equivalents.
• Removed bare window / document / navigator accesses throughout the source; all browser API calls now go through SSR-safe wrappers.