This release focuses on a major visual and behavioral overhaul of tooltips, gauges, and the toolbar, alongside a new zoom-aware LTTB downsampler for very large datasets, a new multi-axis zero-alignment option, and a tightening of the public TypeScript surface.

Tooltip box and arrow now anchor off the bar's rendered DOM rect fixing column/datetime alignment in stacked and grouped charts. Adds a connector arrow (default on) and context-aware placement

• New options:
  • tooltip.arrow: boolean (default true) — render a connector arrow pointing at the data point.

Three new radial-gauge design knobs and a smoother needle update:

When multiple y-axes mix sign ranges (for example one spans -10..15, another 0..3), their zero lines no longer share a pixel position - so bars from different axes appear to have different baselines. Setting alignZero: true on two or more axes now extends each opted-in axis so y=0 lands at the same pixel.

• Default: false (no behavior change unless opted in).
• Closes #5100.

Replaces the mixed icon set (filled circles, illustrated hand, heavy magnifier) with a coordinated stroke-only Lucide-style set, and wraps the toolbar in a soft glass pill container with hover and selected-button backgrounds.

• Tooltip arrow is on by default (tooltip.arrow: true). To restore the pre-5.13 look, set tooltip.arrow: false. The arrow is auto-suppressed for followCursor, fixed.enabled, fillSeriesColor, non-axis charts, and most shared multi-series cases.
• TypeScript users on stricter configs may see new errors from the narrowed literal unions on tooltip.theme, states.filter.type, legend.clusterGroupedSeriesOrientation, and xaxis.axisTicks.borderType. Fix by using one of the documented string values. Reading off opts.w may also surface, since [key: string]: any was removed from formatter option types.

• First-class funnel, pyramid, and gauge chart types — no more type: 'bar' + isFunnel workaround.
• Per-chart-type initial-mount animations — pen-stroke draws, staggered bar grows, scale-up pops, diagonal heatmap waves, treemap cascades, gauge needle settles, and more.
• TimeScale rewrite — single-resolution stride generator replaces the legacy mix-and-match promotion algorithm. Roughly 2,700 lines of logic removed.

chart.type now accepts 'funnel', 'pyramid', and 'gauge' directly. They normalize to the underlying renderer (bar with isFunnel for funnel/pyramid, radialBar for gauge) at config time and preserve chart.requestedType for default selection.

Funnel additions:

• plotOptions.funnel.shape: 'rectangle' | 'trapezoid' — trapezoid mode draws continuous sloped sides between consecutive stages.
• plotOptions.funnel.lastShape: 'flat' | 'taper' — controls whether the final stage tapers to a point.
• Trapezoid mode skips the 3D bar-shadow pass (stages are already contiguous).

Gauge additions:

• plotOptions.radialBar.shape: 'arc' | 'needle'.
• Custom value-to-angle mapping (min/max).
• Configurable bands and ticks that render on both arc and needle shapes.

Samples added under samples/source/funnel/ and samples/source/gauge/.

All colours across the 10 built-in theme palettes now pass WCAG 1.4.11 non-text contrast (≥ 3:1) against both the default light and dark backgrounds.

The time-scale tick generator has been rewritten around a single-resolution stride algorithm. The previous mix-and-match label promotion logic has been removed.

• src/modules/TimeScale.js reduced from ~1,231 lines to a focused stride generator.
• New date helpers in src/utils/DateTime.js for tick generation.

• Tooltip — shared sweep coverage (c13f2ebe) — Shared tooltips on line/area charts now capture every datapoint during a mouse sweep instead of skipping points at fast cursor speeds.
• Accessibility — restore #5183 SVG <title> fix (27bc253c) — The root SVG <title> element is removed again, restoring the original fix that had regressed.
• Pie/donut legend.showForNullSeries = false crash (57be77df, #5216) — Setting legend.showForNullSeries: false on pie/donut charts no longer throws a runtime error.
• Responsive yaxis merge (0ba210b2, fcf46856, #5212) — yaxis array entries from a responsive breakpoint now deep-merge into the matching base-config entries instead of replacing them wholesale.

• Funnel / pyramid / gauge users: The existing type: 'bar' + plotOptions.bar.isFunnel: true and type: 'radialBar' configurations continue to work. New type: 'funnel' | 'pyramid' | 'gauge' is opt-in and recommended for new code — it enables the new shape options and gauge sub-features.
• TimeScale: Tick output is generally cleaner but may differ from 5.11.0 at certain ranges. If you snapshot-test rendered SVGs, expect tick-label snapshot churn.

ApexCharts 5.11.0 ships a comprehensive accessibility overhaul targeting WCAG 2.2 Level AA conformance.

Keyboard & Focus

• Focused data points now expose role="img" and a contextual aria-label (series name, formatted value, category).
• Two-stage Escape: first press dismisses the tooltip, second press exits keyboard navigation (WCAG technique G194).
• Keyboard zoom/pan via + / - / 0 and Shift+Arrow as alternatives to drag gestures.
• Toolbar hit targets enlarged to 24×24 CSS px minimum.
• Tooltip is biased away from the focused data point during keyboard navigation.

ARIA & Semantics

• SVG <title> added alongside the existing <desc>; auto-generated aria-label includes series names when no description is supplied.
• Toolbar controls migrated from div[role=button] to native <button type="button"> (first rule of ARIA)
• Visually-hidden role="status" aria-live="polite" region announces zoom/pan/reset actions to screen readers.

Visual & Motion

• New --apexcharts-focus-color CSS custom property, themed for light (#008FFB), dark (#FFD500), and high-contrast (#FFFF00) modes — fixes SC 1.4.11 / 2.4.7.
• Utils.getContrastRatio() WCAG luminance helper added; high-contrast palette validated ≥ 3:1 against #fff in automated tests — fixes SC 1.4.3 / 1.4.11.
• @media (prefers-reduced-motion: reduce) shrinks all chart animations to near-zero duration — fixes SC 2.2.2.

Tests added: contrast.spec.js, keyboard-trap.spec.js (Playwright), keyboard-zoom.spec.js (Playwright), extended accessibility.spec.js and keyboard-navigation.spec.js.

closestInMultiArray now projects the cursor onto each consecutive line segment rather than measuring distance to the nearest marker. This makes clicking between two markers on a line or area chart reliably pick the correct series — previously, whichever series's marker happened to be closest to the empty space was selected, often giving wrong results when many series clustered together. Bar, scatter, and other non-line chart types retain the existing marker-distance logic.

• Tooltip — shared: false on line charts (#4983): closestInMultiArray was ignoring Y distance whenever allSeriesHasEqualX was true, causing a tie across all series so the lowest-index series always won. The X-only fast path is now restricted to shared: true; full Euclidean distance is used otherwise, so the actually-hovered series is correctly identified.

• Tooltip — shared: true markerClick : Line chart with shared: true now correctly reports the clicked series index in the markerClick event callback.

• Focus outline on mouse click: Removed the focus outline that incorrectly appeared around the entire chart container on mouse click; focus styles are now shown only during keyboard navigation.

• 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).