apexcharts 7.3.0 → 7.5.0

package/src/charts/common/bar/Helpers.js

@@ -560,6 +560,14 @@ export default class Helpers {
    * second at the top, and nothing else touched. Stacked totals already resolve
    * per group (see drawsStackedTotal, #4173); corners never got the same fix.
    *
+   * plotOptions.bar.borderRadiusWhenStacked picks which ends round: 'all'
+   * caps both the baseline and the far end, 'last' only the far end (#4845).
+   *
+   * A single-data-point chart used to hand its baseline segment 'top' (and a
+   * solo segment 'top' instead of 'both'), which on a horizontal stack rounded
+   * the first segment on its INNER edge and left a pill in the middle of the
+   * bar (#4845). One data point is resolved like any other now.
+   *
    * @param {any[]} series
    * @returns {string[][]}
    */
@@ -577,12 +585,17 @@ export default class Helpers {
 
     if (alwaysApplyRadius) return output
 
-    // A lone horizontal bar in a single-category chart keeps 'top' where a
-    // column would take the full 'both'. Preserved from the original.
-    const isSoloHorizontal =
-      this.w.config.chart.type === 'bar' && numColumns === 1
-    const soloCorner = isSoloHorizontal ? 'top' : 'both'
-    const baseCorner = isSoloHorizontal ? 'top' : 'bottom'
+    // 'last' rounds only the far end of a stack and leaves the baseline end
+    // square (#4845); 'all' caps both ends. Corner names are screen-side:
+    // for a positive segment the far end is 'top', for a negative one it is
+    // 'bottom', so a lone positive drops from 'both' to 'top' and a lone
+    // negative from 'both' to 'bottom'.
+    const lastOnly =
+      w.config.plotOptions.bar.borderRadiusWhenStacked === 'last'
+    const soloPositive = lastOnly ? 'top' : 'both'
+    const soloNegative = lastOnly ? 'bottom' : 'both'
+    const positiveBase = lastOnly ? 'none' : 'bottom'
+    const negativeBase = lastOnly ? 'none' : 'top'
 
     for (const stack of this.getStackedSeriesIndices(numSeries)) {
       for (let j = 0; j < numColumns; j++) {
@@ -599,24 +612,30 @@ export default class Helpers {
 
         if (positiveIndices.length > 0 && negativeIndices.length === 0) {
           if (positiveIndices.length === 1) {
-            output[positiveIndices[0]][j] = soloCorner
+            output[positiveIndices[0]][j] = soloPositive
           } else {
             const first = positiveIndices[0]
             const last = positiveIndices[positiveIndices.length - 1]
             for (const i of positiveIndices) {
               output[i][j] =
-                i === first ? baseCorner : i === last ? 'top' : 'none'
+                i === first ? positiveBase : i === last ? 'top' : 'none'
             }
           }
         } else if (negativeIndices.length > 0 && positiveIndices.length === 0) {
           if (negativeIndices.length === 1) {
-            output[negativeIndices[0]][j] = 'both'
+            output[negativeIndices[0]][j] = soloNegative
           } else {
-            const highest = Math.max(...negativeIndices) // closest to the axis
-            const lowest = Math.min(...negativeIndices) // farthest from it
+            // Negatives stack away from the axis in series order, so the
+            // first is at the baseline and the last is the far end.
+            const nearest = Math.min(...negativeIndices)
+            const farthest = Math.max(...negativeIndices)
             for (const i of negativeIndices) {
               output[i][j] =
-                i === highest ? 'bottom' : i === lowest ? 'top' : 'none'
+                i === nearest
+                  ? negativeBase
+                  : i === farthest
+                    ? 'bottom'
+                    : 'none'
             }
           }
         } else if (positiveIndices.length > 0 && negativeIndices.length > 0) {

package/src/modules/Data.js

@@ -1919,8 +1919,11 @@ export default class Data {
   // Segregate user provided data into appropriate vars
   /**
    * @param {any[]} ser
+   * @param {boolean} [overwriteInitialSeries=true] false when the caller hands
+   *   back the series the chart already has (an internal re-render), so the
+   *   baseline resetSeries() restores must not move.
    */
-  parseData(ser) {
+  parseData(ser, overwriteInitialSeries = true) {
     const w = this.w
     const cnf = w.config
     const gl = w.globals
@@ -1993,7 +1996,10 @@ export default class Data {
     // Re-cloning from cnf.series each parse would corrupt initialSeries and
     // break resetZoom (it would only restore one zoom step). Instead, snapshot
     // from the raw stash so initialSeries always represents the true input.
-    if (gl.dataReducerRawSeries && cnf.chart.dataReducer?.enabled) {
+    if (!overwriteInitialSeries) {
+      // An internal re-render replays the series the chart already has, so the
+      // baseline it was given stays put (#5283).
+    } else if (gl.dataReducerRawSeries && cnf.chart.dataReducer?.enabled) {
       const stash = gl.dataReducerRawSeries
       gl.initialSeries = ser.map((s, i) => ({
         ...s,

package/src/modules/DataLabels.js

@@ -4,6 +4,7 @@ import Graphics from './Graphics'
 import Filters from './Filters'
 import { applyProgressiveReveal } from './Animations'
 import { resolveDataLabelOffset } from './helpers/DataLabelOffset'
+import { resolveClaimed } from './weave/Claims'
 
 /**
  * ApexCharts DataLabels Class for drawing dataLabels on Axes based Charts.
@@ -247,10 +248,19 @@ class DataLabels {
     } = opts
 
     let dataLabelText = null
-    if (Array.isArray(w.config.dataLabels.enabledOnSeries)) {
-      if (w.config.dataLabels.enabledOnSeries.indexOf(i) < 0) {
-        return dataLabelText
-      }
+    // The caller's answer for this series, then the plugin's if one claimed it.
+    // A claim is a boolean rather than a restatement of the caller's list
+    // shape, because "does THIS series print labels" is the question here.
+    const labelsOn = resolveClaimed(
+      w,
+      'dataLabels.enabledOnSeries',
+      i,
+      Array.isArray(w.config.dataLabels.enabledOnSeries)
+        ? w.config.dataLabels.enabledOnSeries.indexOf(i) >= 0
+        : true,
+    )
+    if (!labelsOn) {
+      return dataLabelText
     }
 
     let correctedLabels = {

package/src/modules/Exports.js

@@ -998,8 +998,9 @@ class Exports {
     }
 
     const handleUnequalXValues = () => {
-      const categories = new Set()
-      const data = {}
+      // Map stops a plain object category named `__proto__` from writing
+      /** @type {Map<string, {cat: any, values: string[]}>} */
+      const byCategory = new Map()
 
       /**
        * @param {Record<string, any>} s
@@ -1020,14 +1021,13 @@ class Exports {
           } else {
             return
           }
-          if (!(/** @type {Record<string,any>} */ (data)[cat])) {
-            ;/** @type {Record<string,any>} */ (data)[cat] = Array(
-              series.length,
-            ).fill('')
+          const key = String(cat)
+          let row = byCategory.get(key)
+          if (!row) {
+            row = { cat, values: Array(series.length).fill('') }
+            byCategory.set(key, row)
           }
-          ;/** @type {Record<string,any>} */ (data)[cat][sI] =
-            getFormattedValue(value)
-          categories.add(cat)
+          row.values[sI] = getFormattedValue(value)
         })
       })
 
@@ -1035,12 +1035,14 @@ class Exports {
         rows.push(columns.join(columnDelimiter))
       }
 
-      Array.from(categories)
+      Array.from(byCategory.keys())
         .sort()
-        .forEach((cat) => {
+        .forEach((key) => {
+          const { cat, values } = /** @type {{cat: any, values: string[]}} */ (
+            byCategory.get(key)
+          )
           // Join here: pushing the array would leave rows.join() to stringify
           // it, which always uses a comma between category and values.
-          const values = /** @type {Record<string,any>} */ (data)[cat]
           rows.push([getFormattedCategory(cat), ...values].join(columnDelimiter))
         })
     }

package/src/modules/Formatters.js

@@ -84,6 +84,12 @@ class Formatters {
   setLabelFormatters() {
     const w = this.w
     const fmt = w.formatters
+    const inferredNumericX =
+      w.axisFlags.isXNumeric &&
+      w.axisFlags.dataFormatXNumeric &&
+      w.config.xaxis.type !== 'datetime' &&
+      !w.config.xaxis.convertedCatToNumeric &&
+      !w.globals.isBarHorizontal
 
     fmt.xaxisTooltipFormatter = (/** @type {any} */ val) => {
       return this.defaultGeneralFormatter(val)
@@ -109,8 +115,16 @@ class Formatters {
         if (Utils.isNumber(val)) {
           if (
             !w.config.xaxis.convertedCatToNumeric &&
-            w.config.xaxis.type === 'numeric'
+            (w.config.xaxis.type === 'numeric' || inferredNumericX)
           ) {
+            const ticks = w.globals.xAxisScale?.result
+            if (
+              inferredNumericX &&
+              Array.isArray(ticks) &&
+              ticks.every(Number.isInteger)
+            ) {
+              return val.toFixed(0)
+            }
             if (Utils.isNumber(w.config.xaxis.decimalsInFloat)) {
               return val.toFixed(w.config.xaxis.decimalsInFloat)
             } else {
@@ -145,6 +159,15 @@ class Formatters {
 
     if (typeof w.config.tooltip.x.formatter === 'function') {
       fmt.ttKeyFormatter = w.config.tooltip.x.formatter
+    } else if (
+      w.config.xaxis.labels.formatter === undefined &&
+      inferredNumericX
+    ) {
+      const xLabelFormatter = /** @type {(val: any) => any} */ (
+        fmt.xLabelFormatter
+      )
+      fmt.ttKeyFormatter = (/** @type {any} */ val) =>
+        Number.isInteger(val) ? val.toFixed(0) : xLabelFormatter(val)
     } else {
       fmt.ttKeyFormatter = fmt.xLabelFormatter
     }

package/src/modules/Graphics.js

@@ -2,6 +2,7 @@
 import Animations from './Animations'
 import Filters from './Filters'
 import Utils from '../utils/Utils'
+import { resolveClaimed } from './weave/Claims'
 
 /**
  * ApexCharts Graphics Class for all drawing operations.
@@ -609,6 +610,15 @@ class Graphics {
     } else {
       strokeDashArray = w.config.stroke.dashArray
     }
+    // A plugin may have claimed this series' dash. Resolved here rather than
+    // written into the config above, so the caller's own dashing is untouched
+    // and there is nothing to restore when the claim goes. See weave/Claims.
+    strokeDashArray = resolveClaimed(
+      w,
+      'stroke.dashArray',
+      realIndex,
+      strokeDashArray,
+    )
 
     const el = this.drawPath({
       d,

package/src/modules/Range.js

@@ -740,7 +740,34 @@ class Range {
         ticks = Math.round(gl.svgWidth / 150)
 
         // no labels provided and total number of dataPoints is less than 30
-        if (cnf.xaxis.type === 'numeric' && gl.dataPoints < 30) {
+        const inferredNumericX =
+          this.w.axisFlags.isXNumeric &&
+          this.w.axisFlags.dataFormatXNumeric &&
+          cnf.xaxis.type !== 'datetime' &&
+          !cnf.xaxis.convertedCatToNumeric &&
+          !gl.isBarHorizontal
+        const fontSize = parseFloat(cnf.xaxis.labels.style.fontSize) || 12
+        const widestLabelLength = this.w.labelData.labels.reduce(
+          (widest, seriesLabels) =>
+            Array.isArray(seriesLabels)
+              ? seriesLabels.reduce(
+                  (seriesWidest, label) =>
+                    Math.max(seriesWidest, String(label).length),
+                  widest,
+                )
+              : widest,
+          0,
+        )
+        // Range runs before axis text is laid out, so use the conventional
+        // 0.6em average glyph width to reject one-tick-per-point when the
+        // labels cannot plausibly fit in the chart's available width.
+        const allPointLabelsFit =
+          gl.dataPoints * widestLabelLength * fontSize * 0.6 <= gl.svgWidth
+        if (
+          (cnf.xaxis.type === 'numeric' ||
+            (inferredNumericX && allPointLabelsFit)) &&
+          gl.dataPoints < 30
+        ) {
           ticks = gl.dataPoints - 1
         }
 

package/src/modules/Toolbar.js

@@ -45,10 +45,60 @@ export default class Toolbar {
     /** @type {HTMLElement | null} */ this.elMenu = null
     /** @type {HTMLElement[]} */ this.elMenuItems = []
     /** @type {any} */ this.t = null
+    /**
+     * What the last render drew purely because the chart was zoomed: the whole
+     * toolbar ('wrap'), just the reset control ('control'), or neither. Read by
+     * {@link Toolbar#clearZoomAffordance}, which has to take it down by hand.
+     *
+     * @type {'wrap' | 'control' | null}
+     */
+    this._drawnForZoom = null
+  }
+
+  /**
+   * Whether this chart's built-in ways back out of a zoom are switched on.
+   *
+   * The gate `chart.zoom.resetControl` opens, and the one the Escape shortcut
+   * reads too, so a page that says it supplies its own reset gets neither.
+   * 'auto' means "supply one when nothing else on screen can": a toolbar
+   * showing its reset tool is a way back, and anything else is not.
+   *
+   * @returns {boolean}
+   */
+  resetControlAllowed() {
+    const c = this.w.config.chart
+    if (!c.zoom || !c.zoom.enabled) return false
+    const setting =
+      c.zoom.resetControl === undefined ? 'auto' : c.zoom.resetControl
+    if (setting !== 'auto') return !!setting
+    const onScreen =
+      c.toolbar && c.toolbar.show && c.toolbar.tools && c.toolbar.tools.reset
+    return !onScreen
   }
 
-  createToolbar() {
+  /**
+   * Whether a reset control has to be drawn for the state the chart is in now.
+   *
+   * Only while the chart is actually zoomed, which is the whole idea: the
+   * control appears at the moment the viewer changed the view, where they are
+   * already looking, and goes again when the range does. A page that never
+   * zooms never sees it, so `toolbar: { show: false }` still means an empty
+   * chart for everyone who does not zoom.
+   *
+   * @returns {boolean}
+   */
+  resetControlDue() {
+    return !!this.w.interact.zoomed && this.resetControlAllowed()
+  }
+
+  /**
+   * @param {{ resetOnly?: boolean }} [opts] `resetOnly` draws the on-demand
+   *   reset control and nothing else, for a chart whose page asked for no
+   *   toolbar at all. See {@link Toolbar#resetControlDue}.
+   */
+  createToolbar(opts = {}) {
     const w = this.w
+    const resetOnly = !!opts.resetOnly
 
     const createDiv = () => {
       return BrowserAPIs.createElementNS('http://www.w3.org/1999/xhtml', 'div')
@@ -84,6 +134,32 @@ export default class Toolbar {
 
     this.t = w.config.chart.toolbar.tools
 
+    this._drawnForZoom = null
+
+    if (resetOnly) {
+      // Every control off but the one that undoes the zoom. A copy, because
+      // this is the state of one render and not a change to the page's config.
+      this.t = {
+        zoom: false,
+        zoomin: false,
+        zoomout: false,
+        selection: false,
+        pan: false,
+        measure: false,
+        download: false,
+        customIcons: [],
+        reset: true,
+      }
+      this._drawnForZoom = 'wrap'
+    } else if (!this.t.reset && this.resetControlDue()) {
+      // A toolbar that is shown with its reset tool switched off, on a chart
+      // that is now zoomed: the same dead end, so the same answer. It comes and
+      // goes with the zoom, which does shift the icons beside it; that is the
+      // cost of a config which otherwise offers no way back at all.
+      this.t = { ...this.t, reset: true }
+      this._drawnForZoom = 'control'
+    }
+
     if (Array.isArray(this.t.customIcons)) {
       for (let i = 0; i < this.t.customIcons.length; i++) {
         this.elCustomIcons.push(createBtn())
@@ -221,7 +297,19 @@ export default class Toolbar {
       this.elMenuIcon.setAttribute('aria-expanded', 'false')
     }
 
-    this._createHamburgerMenu(elToolbarWrap)
+    // Nothing opens it in a reset-only toolbar, and an export menu is not what
+    // a page that asked for no toolbar is being handed a control for.
+    if (!resetOnly) this._createHamburgerMenu(elToolbarWrap)
+
+    if (resetOnly) {
+      // Just the one binding, rather than the whole set: there is no menu to
+      // open, no mode to toggle, and nothing here reaches for the document.
+      this.elZoomReset?.addEventListener(
+        'click',
+        this.handleZoomReset.bind(this),
+      )
+      return
+    }
 
     if (w.interact.zoomEnabled) {
       this.elZoom.classList.add(this.selectedClass)
@@ -736,6 +824,27 @@ export default class Toolbar {
     }
   }
 
+  /**
+   * Take down whatever the zoom alone put on screen.
+   *
+   * By hand, and not left to the next render, because of the order in
+   * {@link Toolbar#handleZoomReset}: the re-render happens while
+   * `interact.zoomed` is still true, so the control is drawn once more and then
+   * the flag clears with no further pass to notice. Reversing that order would
+   * change what every listener downstream of the update sees, which is a much
+   * larger promise than this control is worth.
+   */
+  clearZoomAffordance() {
+    const drawn = this._drawnForZoom
+    this._drawnForZoom = null
+    if (!drawn || !this.elZoomReset) return
+    const parent = this.elZoomReset.parentNode
+    // 'wrap' means the whole toolbar existed only to carry this one control, so
+    // the page goes back to the bare canvas it asked for.
+    const gone = drawn === 'wrap' ? parent : this.elZoomReset
+    if (gone && gone.parentNode) gone.parentNode.removeChild(gone)
+  }
+
   handleZoomReset() {
     const charts = this.ctx.getSyncedCharts()
 
@@ -784,6 +893,7 @@ export default class Toolbar {
       )
 
       w.interact.zoomed = false
+      ch.ctx.toolbar?.clearZoomAffordance()
     })
   }
 

package/src/modules/ZoomPanSelection.js

@@ -138,6 +138,16 @@ export default class ZoomPanSelection extends Toolbar {
       })
     }
 
+    // Escape: the way back for the viewer who never goes looking for a button.
+    // Bound on the node the gestures are on, which the chart focuses on any
+    // pointer down inside it, so the drag that zoomed also left Escape live.
+    // Bound unconditionally and resolved per event, because the gate reads
+    // config a page can change under a live chart.
+    this.hoverArea.addEventListener('keydown', me.escapeResetEvent.bind(me), {
+      capture: false,
+      passive: true,
+    })
+
     // Momentum: passive:false touch listeners (following the wheel-listener
     // template above) so two-finger pinch and horizontal pan can preventDefault
     // the browser's native page zoom/scroll. Every _updateOptions destroys and
@@ -348,12 +358,16 @@ export default class ZoomPanSelection extends Toolbar {
   /**
    * A wheel or pinch zoom is an incidental gesture: the viewer can land in a
    * zoomed window without meaning to (a page scroll over the chart, a two-finger
-   * swipe), so it is only offered when there is a way back out of it. The only
-   * built-in way back is the toolbar's reset button, hence 'auto' (the default
-   * for both allowMouseWheelZoom and pinch) resolves against that button being
-   * present. A page that builds its own reset control sets the option to true
-   * and gets the gesture with no toolbar. Drag-to-zoom is deliberate, so it is
-   * not gated this way.
+   * swipe), so it is only offered when there is a way back out of it. 'auto'
+   * (the default for both allowMouseWheelZoom and pinch) resolves against a
+   * reset button that is already on screen. A page that builds its own reset
+   * control sets the option to true and gets the gesture with no toolbar.
+   * Drag-to-zoom is deliberate, so it is not gated this way.
+   *
+   * `chart.zoom.resetControl` supplies a reset of its own once a chart IS
+   * zoomed, and deliberately does NOT open this gate. It arrives after the
+   * fact, and what an incidental wheel zoom takes from the viewer first is the
+   * page scroll it swallowed, which no button hands back.
    *
    * @param {boolean|'auto'} setting
    */
@@ -369,6 +383,61 @@ export default class ZoomPanSelection extends Toolbar {
     return this._incidentalZoomEnabled(zoom && zoom.allowMouseWheelZoom)
   }
 
+  /**
+   * Put keyboard focus on the chart, where the chart is focusable at all.
+   *
+   * A drag is swallowed by the zoom handlers before the browser can move focus,
+   * so a viewer who has just zoomed by hand leaves nothing focused, and every
+   * key the chart offers is out of reach: Escape to reset (see
+   * {@link ZoomPanSelection#escapeResetEvent}) and the +, - and 0 the keyboard
+   * module already binds. Focusing what they just acted on puts those in reach.
+   *
+   * Pointer-driven focus, which keyboard navigation expects and does not read
+   * as a request to start navigating, and which the stylesheet draws no ring
+   * around (`svg:focus:not(:focus-visible)`).
+   *
+   * Only where the accessibility module has made the SVG focusable, which is
+   * the default: a page that turned keyboard support off is not handed a tab
+   * stop it never asked for, and still has the reset control as its way back.
+   */
+  _focusForKeyboard() {
+    const node = this.w.dom.Paper && this.w.dom.Paper.node
+    if (!node || typeof node.focus !== 'function') return
+    if (node.getAttribute('tabindex') === null) return
+    // Said before the focus lands, or the accessibility module reads it as a
+    // request to start navigating and flashes a tooltip after every zoom.
+    this.ctx.keyboardNavigation?.notePointerFocus?.()
+    try {
+      node.focus({ preventScroll: true })
+    } catch {
+      node.focus()
+    }
+  }
+
+  /**
+   * Escape, on a zoomed chart, puts the range back.
+   *
+   * The quiet half of the same answer the on-demand reset control gives, and
+   * gated on it, so a page that says it supplies its own way back gets neither.
+   *
+   * It defers to keyboard navigation, whose Escape dismisses the tooltip and
+   * which offers `0` for this, so the key means one thing at a time. It does
+   * not stop the event either, so a page listening for Escape still hears it.
+   *
+   * Reachable because a completed drag-zoom puts focus on the chart; see
+   * {@link ZoomPanSelection#_focusForKeyboard}.
+   *
+   * @param {any} e
+   */
+  escapeResetEvent(e) {
+    if (e.key !== 'Escape' && e.key !== 'Esc') return
+    if (!this.w.interact.zoomed) return
+    const nav = this.ctx.keyboardNavigation
+    if (nav && nav.active) return
+    if (!this.resetControlAllowed()) return
+    this.handleZoomReset()
+  }
+
   /** Lazily-created, re-render-surviving wheel-gesture state. */
   _wheel() {
     const it = this.w.interact
@@ -1071,12 +1140,21 @@ export default class ZoomPanSelection extends Toolbar {
           // fix issue #650
           options.yaxis = yaxis
         }
-        me.ctx.updateHelpers._updateOptions(
+        const applied = me.ctx.updateHelpers._updateOptions(
           options,
           false,
           me.w.config.chart.animations.dynamicAnimation.enabled,
         )
 
+        // After the render, not before it: the update replaces the SVG, and
+        // focus set on the node that is about to be thrown away goes back to
+        // the document body with it. Measured, not theorised.
+        if (applied && typeof applied.then === 'function') {
+          applied.then(() => me._focusForKeyboard())
+        } else {
+          me._focusForKeyboard()
+        }
+
         if (typeof w.config.chart.events.zoomed === 'function') {
           toolbar.zoomCallback(xaxis, yaxis)
         }

package/src/modules/accessibility/KeyboardNavigation.js

@@ -147,6 +147,20 @@ export default class KeyboardNavigation {
     this._lastPointerDownAt = Date.now()
   }
 
+  /**
+   * Note that a pointer gesture is about to move focus into the chart.
+   *
+   * The 100 ms window above catches the browser's own click-to-focus, which
+   * lands immediately. A drag-zoom moves focus deliberately, and only once its
+   * re-render is done (ZoomPanSelection#_focusForKeyboard), which is far
+   * outside that window. Without this it reads as a viewer asking to navigate
+   * by keyboard, which activates nav and flashes a tooltip at the first visible
+   * point after every zoom.
+   */
+  notePointerFocus() {
+    this._lastPointerDownAt = Date.now()
+  }
+
   /**
    * Called from Events.js keydown handler. Navigation keys are already handled
    * by the direct SVG listener (which can call preventDefault). This entry

package/src/modules/axes/YAxis.js

@@ -551,42 +551,39 @@ export default class YAxis {
 
   setYAxisTextAlignments() {
     const w = this.w
-    const yaxis = Array.from(
-      w.dom.baseEl.getElementsByClassName('apexcharts-yaxis'),
-    )
 
-    yaxis.forEach((y, index) => {
-      const yaxe = w.config.yaxis[index]
+    // Iterate config, not the DOM collection: Axes.drawAxis skips
+    // ignoreYAxisIndexes entirely, so a collapsed axis makes the DOM
+    // shorter than config.yaxis and a later visible axis would be missed.
+    w.config.yaxis.forEach((yaxe, index) => {
       if (yaxe && !yaxe.floating && yaxe.labels.align !== undefined) {
         const yAxisInner = w.dom.baseEl.querySelector(
           `.apexcharts-yaxis[rel='${index}'] .apexcharts-yaxis-texts-g`,
         )
+        // drawYaxis returns before adding .apexcharts-yaxis-texts-g when the
+        // axis is hidden, so there is nothing to align.
+        if (!yAxisInner) return
+
         const yAxisTexts = Array.from(
           w.dom.baseEl.querySelectorAll(
             `.apexcharts-yaxis[rel='${index}'] .apexcharts-yaxis-label`,
           ),
         )
-        const rect = /** @type {Element} */ (yAxisInner).getBoundingClientRect()
+        const rect = yAxisInner.getBoundingClientRect()
 
         yAxisTexts.forEach((label) => {
           label.setAttribute('text-anchor', yaxe.labels.align)
         })
 
         if (yaxe.labels.align === 'left' && !yaxe.opposite) {
-          ;/** @type {Element} */ (yAxisInner).setAttribute(
-            'transform',
-            `translate(-${rect.width}, 0)`,
-          )
+          yAxisInner.setAttribute('transform', `translate(-${rect.width}, 0)`)
         } else if (yaxe.labels.align === 'center') {
-          ;/** @type {Element} */ (yAxisInner).setAttribute(
+          yAxisInner.setAttribute(
             'transform',
             `translate(${(rect.width / 2) * (!yaxe.opposite ? -1 : 1)}, 0)`,
           )
         } else if (yaxe.labels.align === 'right' && yaxe.opposite) {
-          ;/** @type {Element} */ (yAxisInner).setAttribute(
-            'transform',
-            `translate(${rect.width}, 0)`,
-          )
+          yAxisInner.setAttribute('transform', `translate(${rect.width}, 0)`)
         }
       }
     })