github apexcharts/apexcharts.js v5.11.0
💎 Version 5.11.0

5 hours ago

Highlights

WCAG 2.2 AA Accessibility Remediation

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.


Improved Tooltip Hit Detection for Line / Area Charts

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.


Bug Fixes

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

Don't miss a new apexcharts.js release

NewReleases is sending notifications on new releases.