apexcharts 7.7.0 → 7.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexcharts",
-  "version": "7.7.0",
+  "version": "7.9.0",
   "description": "A JavaScript Chart Library",
   "repository": {
     "type": "git",
@@ -240,6 +240,10 @@
       "import": "./dist/features/link.esm.js",
       "require": "./dist/features/link.common.js"
     },
+    "./features/highlight-filter": {
+      "import": "./dist/features/highlight-filter.esm.js",
+      "require": "./dist/features/highlight-filter.common.js"
+    },
     "./features/ink": {
       "import": "./dist/features/ink.esm.js",
       "require": "./dist/features/ink.common.js"
@@ -330,14 +334,11 @@
     "apex-commons": "^0.8.0"
   },
   "devDependencies": {
-    "@babel/core": "7.29.7",
-    "@babel/preset-env": "7.29.7",
     "@blazediff/core": "1.0.0",
     "@eslint/js": "^9.0.0",
     "@playwright/test": "1.58.2",
     "@rollup/plugin-terser": "0.4.4",
     "@vitest/coverage-v8": "^4.0.18",
-    "babel-jest": "30.2.0",
     "chalk": "3.0.0",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
@@ -346,9 +347,6 @@
     "eslint-plugin-promise": "^6.1.1",
     "fs-extra": "8.1.0",
     "globals": "^15.0.0",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-puppeteer": "^10.0.1",
     "jsdom": "^28.0.0",
     "nunjucks": "3.2.4",
     "nyc": "15.0.0",
@@ -364,7 +362,7 @@
     "vitest": "^4.0.18"
   },
   "resolutions": {
-    "undici": "^7.29.0",
+    "undici": "^7.30.0",
     "form-data": "^4.0.6",
     "serialize-javascript": "^7.0.5",
     "vite": "^6.4.3",
@@ -373,7 +371,7 @@
   "bugs": {
     "url": "https://github.com/apexcharts/apexcharts.js/issues"
   },
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://apexcharts.com",
   "sideEffects": [
     "*.css",

package/src/apexcharts.js

@@ -4,6 +4,7 @@ import CoreUtils from './modules/CoreUtils'
 import DataLabels from './modules/DataLabels'
 import PerformanceCache from './utils/PerformanceCache'
 import Defaults from './modules/settings/Defaults'
+import Config from './modules/settings/Config'
 import { RESERVED_TYPES, TYPE_ALIASES } from './modules/settings/TypeAliases'
 import Grid from './modules/axes/Grid'
 import Markers from './modules/Markers'
@@ -40,7 +41,11 @@ import {
 import { registerEasing } from './modules/animations/Easing'
 import { trimStreamingSeries } from './modules/animations/StreamScroll'
 import { applyAxisTransition } from './modules/animations/AxisTransition'
-import { applyDataLabelTransition } from './modules/animations/DataLabelTransition'
+import { applyCircleTransition } from './modules/animations/CircleTransition'
+import {
+  applyDataLabelTransition,
+  playExitLabels,
+} from './modules/animations/DataLabelTransition'
 import {
   registerPlugin as registerPluginImpl,
   unregisterPlugin as unregisterPluginImpl,
@@ -440,7 +445,7 @@ export default class ApexCharts {
     // @ts-ignore — convertedCatToNumeric is an internal property set by Defaults
     if (w.config.xaxis.convertedCatToNumeric) {
       const defaults = new Defaults(w.config)
-      defaults.convertCatToNumericXaxis(w.config, this.ctx)
+      defaults.convertCatToNumericXaxis(w.config)
     }
 
     this.core.setupElements()
@@ -617,6 +622,7 @@ export default class ApexCharts {
 
     const dataLabels = new DataLabels(this.w, this)
     dataLabels.bringForward()
+    dataLabels.avoidOverlaps()
     if (w.config.dataLabels.background.enabled) {
       dataLabels.dataLabelsBackground()
     }
@@ -696,6 +702,8 @@ export default class ApexCharts {
       } else {
         w.dom.elGraphical.add(graphData.elGraph)
       }
+      // Hidden series: clear their resting shape once their exit is over.
+      this.series.settleCollapsedShapes(graphData.elGraph)
 
       if (w.config.grid.position === 'front') {
         if (elgrid) {
@@ -925,6 +933,8 @@ export default class ApexCharts {
       options = { ...options }
       delete options.series
     }
+    // `tooltip: undefined` means "not given" (see Config.dropEmptyOptions).
+    options = Config.dropEmptyOptions(options)
 
     // Trellis (#22): an option change on a live trellis host is structural
     // (it can move the split, the scales, the layout or any panel option), so
@@ -1110,6 +1120,11 @@ export default class ApexCharts {
 
     me.data.resetParsingFlags()
     me.w.globals.dataChanged = true
+    // appendData takes no `animate`: it animates per the config. The flag is
+    // sticky, so without this an earlier unanimated update (a pan, a wheel
+    // zoom, a brush moving its target, updateSeries(data, false)) silently
+    // switched off the animation of every append after it.
+    me.w.globals.shouldAnimate = true
     // previous paths feed the update morph; with animations off nothing
     // consumes them, and the capture is O(n) (stream-frame + DOM walk)
     if (me.w.config.chart.animations.enabled) {
@@ -1225,6 +1240,10 @@ export default class ApexCharts {
           ? Utils.clone(options)
           : null
 
+      // A type-change morph that has already been shown is over for this
+      // render: it starts from the screen, not from the old chart's shapes.
+      this.morphTypeChange?.retire()
+
       new Destroy(this.ctx).clear({ isUpdating: true })
 
       // A re-render replays w.config.series, which carries whatever the last
@@ -1246,12 +1265,23 @@ export default class ApexCharts {
           // Variable-length update: slide surviving tick labels/gridlines to
           // their new positions and fade in the new ones, on the same clock
           // as the series morph (no-op otherwise; consumes prevChromeFrame).
-          applyAxisTransition(this.w)
+          // A moved plot area eases too, except under a cross-type morph,
+          // which offsets its own start shapes by the move.
+          applyAxisTransition(this.w, {
+            layout: !this.morphTypeChange?.isActive(),
+          })
+          // A circle chart the chrome re-centred or resized (a title, the
+          // legend) eases to its new centre and radius on the same clock, with
+          // the plot rect when it has no axes. Same cross-type morph rule.
+          applyCircleTransition(this.w, {
+            layout: !this.morphTypeChange?.isActive(),
+          })
 
           // Ride data labels to their new slot (and, opt-in, count their value
           // up) on the same clock as the morph. No-op when nothing moved or no
           // frame was captured this update.
           applyDataLabelTransition(this.w)
+          playExitLabels(this.w)
 
           if (typeof this.w.config.chart.events.updated === 'function') {
             this.w.config.chart.events.updated(this, this.w)
@@ -1462,6 +1492,8 @@ export default class ApexCharts {
       try {
         const w = this.w
         const gl = w.globals
+        // As in update(): a morph already shown is over for this render.
+        this.morphTypeChange?.retire()
 
         gl.shouldAnimate = animate
         gl.dataChanged = true
@@ -1498,6 +1530,8 @@ export default class ApexCharts {
         gl2.cachedSelectors = {}
         gl2.disableZoomIn = false
         gl2.disableZoomOut = false
+        gl2.fadeRevealEls = []
+        gl2.morphBatch = { pending: 0, onDone: null, series: new Map() }
 
         // Recompute axis min/max and scale ranges from new data.
         if (gl.axisCharts) {
@@ -1605,10 +1639,12 @@ export default class ApexCharts {
             w.dom.elGraphical.add(g)
           })
         }
+        this.series.settleCollapsedShapes(graphs)
 
         // Bring data labels forward and apply backgrounds if configured.
         const dataLabels = new DataLabels(w, this)
         dataLabels.bringForward()
+        dataLabels.avoidOverlaps()
         if (w.config.dataLabels.background.enabled) {
           dataLabels.dataLabelsBackground()
         }
@@ -1642,6 +1678,7 @@ export default class ApexCharts {
         // scroll itself.
         if (!gl.streamScrolled) applyAxisTransition(w)
         applyDataLabelTransition(w)
+        playExitLabels(w)
 
         // Reattach tooltip event listeners to new series elements.
         if (Environment.isBrowser() && w.config.tooltip.enabled && !gl.noData) {
@@ -2464,6 +2501,9 @@ export default class ApexCharts {
     const gl = w.globals
 
     return {
+      // The merged options this chart is running on (defaults < window.Apex <
+      // user), so a reader does not have to go through the internal `w`.
+      config: w.config,
       // Series data — computed/parsed form used for rendering
       series: w.seriesData.series,
       seriesNames: w.seriesData.seriesNames,

package/src/assets/apexcharts.css

@@ -359,15 +359,24 @@ rect.legend-mouseover-inactive,
 .apexcharts-bar-area.apexcharts-keyboard-focused,
 .apexcharts-candlestick-area.apexcharts-keyboard-focused,
 .apexcharts-boxPlot-area.apexcharts-keyboard-focused,
+.apexcharts-violin-area.apexcharts-keyboard-focused,
 .apexcharts-rangebar-area.apexcharts-keyboard-focused,
 .apexcharts-pie-area.apexcharts-keyboard-focused,
 .apexcharts-heatmap-rect.apexcharts-keyboard-focused,
-.apexcharts-treemap-rect.apexcharts-keyboard-focused {
+.apexcharts-treemap-rect.apexcharts-keyboard-focused,
+.apexcharts-keyboard-focus-ring {
   stroke: var(--apexcharts-focus-color, #008FFB);
   stroke-width: 2;
   stroke-opacity: 1;
 }
 
+/* A heatmap or a bar-like painted to canvas has no node per cell or mark, so
+   keyboard focus draws this outline over the focused one instead. */
+.apexcharts-keyboard-focus-ring {
+  fill: none;
+  pointer-events: none;
+}
+
 .apexcharts-tooltip {
   --apx-tt-bg: #ffffff;
   /* Shared by the body and the arrow's two outward facets, so the
@@ -430,7 +439,9 @@ rect.legend-mouseover-inactive,
   opacity: 1;
   transition: opacity .12s ease
 }
-.apexcharts-tooltip.apexcharts-tooltip-interactive {
+/* Only while shown: a hidden box keeps its last position, which on a short
+ * chart is outside the chart, over whatever the page has there. */
+.apexcharts-tooltip.apexcharts-tooltip-interactive.apexcharts-active {
   pointer-events: auto;
 }
 .apexcharts-tooltip.apexcharts-active[data-positioned="true"] {
@@ -532,7 +543,13 @@ rect.legend-mouseover-inactive,
  * (-6px = -1px border - 10px/2), i.e. exactly on the body's border line,
  * so the two borders meet end to end instead of overlapping or gapping.
  * `box-sizing` must be border-box or the bordered sides would grow the
- * square asymmetrically and knock its centre off that line. */
+ * square asymmetrically and knock its centre off that line.
+ *
+ * Along the edge, `--apx-tt-arrow-y` / `--apx-tt-arrow-x` are measured from
+ * the body's outer edge, as every position the script works out is, while
+ * `top` / `left` count from inside its 1px border: hence 6px back, not 5px,
+ * or the arrow stands a pixel past the mark it points at. The 50% default
+ * centres on the padding box, which is the body's centre either way. */
 .apexcharts-tooltip-arrow {
   position: absolute;
   box-sizing: border-box;
@@ -541,7 +558,7 @@ rect.legend-mouseover-inactive,
   background: var(--apx-tt-arrow-bg);
   transform: rotate(45deg);
   pointer-events: none;
-  top: calc(var(--apx-tt-arrow-y, 50%) - 5px)
+  top: calc(var(--apx-tt-arrow-y, calc(50% + 1px)) - 6px)
 }
 
 /* Which two sides face outward depends on the placement. Under
@@ -568,7 +585,7 @@ rect.legend-mouseover-inactive,
 .apexcharts-tooltip[data-placement="top"] .apexcharts-tooltip-arrow,
 .apexcharts-tooltip[data-placement="bottom"] .apexcharts-tooltip-arrow {
   top: auto;
-  left: calc(var(--apx-tt-arrow-x, 50%) - 5px)
+  left: calc(var(--apx-tt-arrow-x, calc(50% + 1px)) - 6px)
 }
 
 .apexcharts-tooltip[data-placement="top"] .apexcharts-tooltip-arrow {