apexcharts 8.2.0 → 8.3.0

package/src/modules/CoreUtils.js

@@ -325,28 +325,6 @@ class CoreUtils {
     // for multi axis charts.
     gl.seriesYAxisMap = axisSeriesMap.map((x) => x)
     gl.seriesYAxisReverseMap = seriesYAxisReverseMap.map((x) => x)
-    // Set default series group names
-    /**
-     * @param {Record<string, any>} axisSeries
-     * @param {number} ai
-     */
-    gl.seriesYAxisMap.forEach((axisSeries, ai) => {
-      /**
-       * @param {number} si
-       */
-      axisSeries.forEach((si) => {
-        // series may be bare until loaded in realtime
-        if (
-          /** @type {any} */ (cnf.series[si]) &&
-          /** @type {any} */ (cnf.series[si]).group === undefined
-        ) {
-          // A series with no group defined will be named after the axis that
-          // referenced it and thus form a group automatically.
-          const _series = /** @type {any} */ (cnf.series[si])
-          _series.group = 'apexcharts-axis-'.concat(ai.toString())
-        }
-      })
-    })
   }
 
   /**
@@ -552,18 +530,20 @@ class CoreUtils {
     const stackedTotals = excluded.length
       ? this.getStackedSeriesTotals(excluded)
       : w.seriesData.stackedSeriesTotals
-    // Columns and areas on a numeric axis stack by x, so each point takes its
-    // share of the stack at its own x (horizontal bars stack by index).
-    const sx =
-      w.axisFlags.isXNumeric &&
-      !w.config.plotOptions.bar.horizontal &&
-      w.seriesData.seriesX
-    /** @type {Map<number, number>} */
+    // Bars and areas on a numeric axis stack by x, so each point takes its
+    // share of the stack at its own x.
+    const sx = w.axisFlags.isXNumeric && w.seriesData.seriesX
+    // Each series group is its own stack, so it normalises to its own total.
+    const gi = w.labelData.seriesGroupIndex
+    const byKey = sx || w.labelData.seriesGroups.length > 1
+    /** @param {number} i @param {number} j */
+    const key = (i, j) => gi[i] + ' ' + (sx ? sx[i][j] : j)
+    /** @type {Map<string, number>} */
     const byX = new Map()
-    if (sx) {
+    if (byKey) {
       w.seriesData.series.forEach((s, i) => {
         if (excluded.indexOf(i) < 0) {
-          s.forEach((v, j) => byX.set(sx[i][j], (byX.get(sx[i][j]) || 0) + v))
+          s.forEach((v, j) => byX.set(key(i, j), (byX.get(key(i, j)) || 0) + v))
         }
       })
     }
@@ -576,7 +556,7 @@ class CoreUtils {
       const seriesPercent = []
       if (Array.isArray(ser)) {
         for (let j = 0; j < ser.length; j++) {
-          const total = sx ? byX.get(sx[i][j]) : stackedTotals[j]
+          const total = byKey ? byX.get(key(i, j)) : stackedTotals[j]
           let percent = 0
           if (total) {
             percent = (100 * ser[j]) / total
@@ -638,11 +618,9 @@ class CoreUtils {
       zRatio = 1
     }
 
-    if (gl.minY !== Number.MIN_VALUE && Math.abs(gl.minY) !== 0) {
-      // Negative numbers present in series
-      const _hasNegsGl = /** @type {any} */ (gl)
-      _hasNegsGl.hasNegs = true
-    }
+    // Negative numbers present in series; reassigned so an update clears it
+    const _hasNegsGl = /** @type {any} */ (gl)
+    _hasNegsGl.hasNegs = gl.minY !== Number.MIN_VALUE && Math.abs(gl.minY) !== 0
 
     // Check we have a map as series may still to be added/updated.
     if (w.globals.seriesYAxisReverseMap.length > 0) {
@@ -860,7 +838,7 @@ class CoreUtils {
   // other series of the same type on the same axis.
   /**
    * @param {Record<string, any>} typeSeries
-   * @param {string[]} typeGroups
+   * @param {number[]} typeGroups
    * @param {string} type
    * @param {string} chartClass
    */
@@ -871,7 +849,7 @@ class CoreUtils {
     if (typeSeries.series.length > 0) {
       // draw each group separately
       /**
-       * @param {string} gn
+       * @param {number} gn
        */
       typeGroups.forEach((/** @type {any} */ gn) => {
         /** @type {any[]} */
@@ -883,9 +861,7 @@ class CoreUtils {
          * @param {number} ii
          */
         typeSeries.i.forEach((/** @type {any} */ i, /** @type {any} */ ii) => {
-          if (
-            /** @type {Record<string,any>} */ (w.config.series[i]).group === gn
-          ) {
+          if (w.labelData.seriesGroupIndex[i] === gn) {
             gs.push(typeSeries.series[ii])
             gi.push(i)
           }

package/src/modules/Data.js

@@ -97,7 +97,7 @@ function isRawSample(d, name, flatY) {
 function subtreeTotal(d) {
   if (!d || typeof d !== 'object') return Utils.parseNumber(d) || 0
   const v = d.y ?? d.value
-  if (v != null) return Utils.parseNumber(v) || 0
+  if (v != null && v !== '') return Utils.parseNumber(v) || 0
   if (!Array.isArray(d.children)) return 0
   return d.children.reduce(
     (/** @type {number} */ s, /** @type {any} */ c) =>
@@ -1038,22 +1038,21 @@ export default class Data {
     })
 
     this.coreUtils.setSeriesYAxisMappings()
-    // At this point, every series that didn't have a user defined group name
-    // has been given a name according to the yaxis the series is referenced by.
-    // This fits the existing behaviour where all series associated with an axis
-    // are defacto presented as a single group. It is now formalised.
+    // A series with no user defined group is grouped by the yaxis that
+    // references it, so all series of an axis form one group. The name is
+    // derived here, never written back onto the caller's series objects.
+    const rev = this.w.globals.seriesYAxisReverseMap
+    const keys = cnf.series.map(
+      (/** @type {any} */ s, /** @type {number} */ i) =>
+        s.group ?? 'apexcharts-axis-' + rev[i],
+    )
     /** @type {any[]} */
     const buckets = []
-    /**
-     * @param {Record<string, any>} s
-     */
-    const groups = [
-      ...new Set(cnf.series.map((/** @type {any} */ s) => s.group)),
-    ]
+    const groups = [...new Set(keys)]
     // Membership is recorded by index: groups may reuse series names.
-    this.w.labelData.seriesGroupIndex = cnf.series.map(
-      (/** @type {any} */ s, /** @type {number} */ i) => {
-        const index = groups.indexOf(s.group)
+    this.w.labelData.seriesGroupIndex = keys.map(
+      (/** @type {any} */ k, /** @type {number} */ i) => {
+        const index = groups.indexOf(k)
         if (!buckets[index]) buckets[index] = []
 
         buckets[index].push(this.w.seriesData.seriesNames[i])
@@ -1477,19 +1476,19 @@ export default class Data {
           if (rootColors && x !== undefined) {
             rootColors[labels.length] = dataPoint.color
           }
-          if (x !== undefined && y !== undefined) {
-            labels.push(String(x))
-            values.push(Utils.parseNumber(y))
-          } else if (x !== undefined && Array.isArray(dataPoint.children)) {
+          if (x !== undefined && Array.isArray(dataPoint.children)) {
             // A partition chart (sunburst, icicle) may leave a branch's own
-            // value out and let it be the sum of its children. The hierarchy
-            // resolver does exactly that in `fillValues`, but that runs long
-            // after this parse, and dropping the datum here left the chart with
-            // an EMPTY series, which makes the renderer bail before it ever
-            // builds the tree: a blank chart and a warning about pie data.
-            // So roll the subtree up now, which is the same number.
+            // value out (or null / '') and let it be the sum of its children.
+            // The hierarchy resolver does exactly that in `fillValues`, but
+            // that runs long after this parse, and dropping the datum here left
+            // the chart with an EMPTY series, which makes the renderer bail
+            // before it ever builds the tree: a blank chart and a warning about
+            // pie data. So roll the subtree up now, which is the same number.
             labels.push(String(x))
             values.push(subtreeTotal(dataPoint))
+          } else if (x !== undefined && y !== undefined) {
+            labels.push(String(x))
+            values.push(Utils.parseNumber(y))
           } else {
             console.warn(
               'ApexCharts: Invalid data point format for pie chart. Expected {x, y} format:',

package/src/modules/DataLabels.js

@@ -118,6 +118,12 @@ class DataLabels {
       drawnextLabel = true
     }
 
+    // Record the drawn RECT's index, not the point's: a rangeArea series
+    // records two rects per point (its start labels, then its end labels).
+    if (drawnextLabel) {
+      ;(w.globals.lastDrawnDataLabelsIndexes[i] ||= []).push(len + 1)
+    }
+
     return {
       x,
       y,
@@ -474,12 +480,6 @@ class DataLabels {
       // Progressive reveal: data labels fade in alongside their markers as the
       // line's pen-stroke reaches them. Uses the corrected x (post-offset).
       if (penDrawn(w, i)) applyProgressiveReveal(dataLabelText, x, w)
-
-      if (typeof w.globals.lastDrawnDataLabelsIndexes[i] === 'undefined') {
-        w.globals.lastDrawnDataLabelsIndexes[i] = []
-      }
-
-      w.globals.lastDrawnDataLabelsIndexes[i].push(j)
     }
 
     return dataLabelText

package/src/modules/Graphics.js

@@ -457,6 +457,23 @@ class Graphics {
     return arc
   }
 
+  /**
+   * stroke.dashArray of a series, shared with the canvas renderer. A plugin
+   * may have claimed it: resolved here rather than written into the config,
+   * so the caller's own dashing is untouched and there is nothing to restore
+   * when the claim goes. See weave/Claims.
+   * @param {number} realIndex
+   */
+  seriesDash(realIndex) {
+    const d = this.w.config.stroke.dashArray
+    return resolveClaimed(
+      this.w,
+      'stroke.dashArray',
+      realIndex,
+      Array.isArray(d) ? d[realIndex] : d,
+    )
+  }
+
   /**
    * @memberof Graphics
    * @param {Record<string, any>} opts
@@ -610,23 +627,6 @@ class Graphics {
       }
     }
 
-    const strokeDashArrayOpt = w.config.stroke.dashArray
-    let strokeDashArray = 0
-    if (Array.isArray(strokeDashArrayOpt)) {
-      strokeDashArray = strokeDashArrayOpt[realIndex]
-    } 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,
       stroke,
@@ -635,7 +635,7 @@ class Graphics {
       fillOpacity: 1,
       classes: className,
       strokeLinecap,
-      strokeDashArray,
+      strokeDashArray: this.seriesDash(realIndex),
     })
 
     el.attr('index', realIndex)
@@ -935,13 +935,21 @@ class Graphics {
     return g
   }
 
-  /** @param {{ text: any, maxWidth: any, fontSize: any, fontFamily?: any }} opts */
-  getTextBasedOnMaxWidth({ text, maxWidth, fontSize, fontFamily }) {
-    const tRects = this.getTextRects(text, fontSize, fontFamily, '')
-    const wordWidth = tRects.width / text.length
-    const wordsBasedOnWidth = Math.floor(maxWidth / wordWidth)
+  /** @param {{ text: any, maxWidth: any, fontSize: any, fontFamily?: any, fontWeight?: any }} opts */
+  getTextBasedOnMaxWidth({ text, maxWidth, fontSize, fontFamily, fontWeight }) {
+    const tRects = this.getTextRects(
+      text,
+      fontSize,
+      fontFamily,
+      '',
+      true,
+      fontWeight,
+    )
+    // Characters that fit, less the ellipsis. Below zero not even '...'
+    // fits (and a negative slice end would keep nearly the whole text).
+    const n = Math.floor(maxWidth / (tRects.width / text.length)) - 3
     if (maxWidth < tRects.width) {
-      return text.slice(0, wordsBasedOnWidth - 3) + '...'
+      return n < 0 ? '' : text.slice(0, n) + '...'
     }
     return text
   }
@@ -984,6 +992,7 @@ class Graphics {
       maxWidth,
       fontSize,
       fontFamily,
+      fontWeight,
     }
     let elText
     if (Array.isArray(text)) {
@@ -1226,7 +1235,12 @@ class Graphics {
     if (w.config.states.hover.filter.type !== 'none') {
       if (!w.interact.isTouchDevice) {
         const hoverFilter = w.config.states.hover.filter
-        filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value)
+        filters.applyFilter(
+          path,
+          Filters.isSliceChart(w) ? j : i,
+          hoverFilter.type,
+          hoverFilter.value,
+        )
       }
     }
   }
@@ -1267,35 +1281,29 @@ class Graphics {
     if (Filters.hoverOutlineOwnsHoverState(w)) return
 
     if (w.config.states.hover.filter.type !== 'none') {
-      filters.getDefaultFilter(path, i)
+      filters.getDefaultFilter(path, Filters.isSliceChart(w) ? j : i)
     }
   }
 
   /**
    * Clear every selected data point (single-select mode): reset the selection
-   * array and restore the default filter on all series path/circle/rect nodes.
-   * NOTE: preserves the original behavior of passing the clicked series index
-   * `i` to getDefaultFilter for every element (not each element's own index).
-   * @param {any} filters @param {number} i
+   * array and restore the default filter on each selected node, with its own
+   * series index (dropShadow.enabledOnSeries is per series; a pie slice's
+   * shadow is per slice, j).
+   * @param {any} filters
    */
-  _clearAllDataPointSelections(filters, i) {
+  _clearAllDataPointSelections(filters) {
     const w = this.w
     w.interact.selectedDataPoints = []
-    const elPaths = w.dom.Paper.find(
-      '.apexcharts-series path:not(.apexcharts-decoration-element)',
-    )
-    const elCircles = w.dom.Paper.find(
-      '.apexcharts-series circle:not(.apexcharts-decoration-element), .apexcharts-series rect:not(.apexcharts-decoration-element)',
-    )
-    /** @param {any[]} els */
-    const deSelect = (els) => {
-      Array.prototype.forEach.call(els, (/** @type {any} */ el) => {
+    w.dom.Paper.find('.apexcharts-series [selected="true"]').forEach(
+      (/** @type {any} */ el) => {
         el.node.setAttribute('selected', 'false')
-        filters.getDefaultFilter(el, i)
-      })
-    }
-    deSelect(elPaths)
-    deSelect(elCircles)
+        filters.getDefaultFilter(
+          el,
+          +el.node.getAttribute(Filters.isSliceChart(w) ? 'j' : 'index'),
+        )
+      },
+    )
   }
 
   /**
@@ -1321,7 +1329,7 @@ class Graphics {
       !w.config.states.active.allowMultipleDataPointsSelection &&
       w.interact.selectedDataPoints.length > 0
     ) {
-      this._clearAllDataPointSelections(filters, i)
+      this._clearAllDataPointSelections(filters)
     }
 
     path.node.setAttribute('selected', 'true')
@@ -1350,11 +1358,11 @@ class Graphics {
 
     if (selected === 'true') {
       const activeFilter = w.config.states.active.filter
-      if (activeFilter !== 'none') {
+      if (activeFilter.type !== 'none') {
         filters.applyFilter(path, i, activeFilter.type, activeFilter.value)
       } else {
         // Reapply the hover filter in case it was removed by `deselect`when there is no active filter and it is not a touch device
-        if (w.config.states.hover.filter !== 'none') {
+        if (w.config.states.hover.filter.type !== 'none') {
           if (!w.interact.isTouchDevice) {
             const hoverFilter = w.config.states.hover.filter
             filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value)
@@ -1404,7 +1412,12 @@ class Graphics {
 
     if (!crossfilterClick) {
       const selected = this._togglePointSelection(path, filters, i, j)
-      this._applyPointSelectionFilter(path, filters, i, selected)
+      this._applyPointSelectionFilter(
+        path,
+        filters,
+        Filters.isSliceChart(w) ? j : i,
+        selected,
+      )
     }
 
     if (typeof w.config.chart.events.dataPointSelection === 'function') {

package/src/modules/Markers.js

@@ -143,8 +143,10 @@ export default class Markers {
   setGlobalMarkerSize() {
     const w = this.w
 
+    // A copy: the padding below must not grow (or throw on a frozen) caller
+    // array.
     w.globals.markers.size = Array.isArray(w.config.markers.size)
-      ? w.config.markers.size
+      ? w.config.markers.size.slice()
       : [w.config.markers.size]
 
     if (w.globals.markers.size.length > 0) {

package/src/modules/Range.js

@@ -634,42 +634,38 @@ class Range {
     gl.barGroups = []
     gl.lineGroups = []
     gl.areaGroups = []
-    /**
-     * @param {Record<string, any>} s
-     */
-    cnf.series.forEach((s) => {
-      const _s = /** @type {any} */ (s)
-      const type = _s.type || cnf.chart.type
-      switch (type) {
+    cnf.series.forEach((s, i) => {
+      const g = this.w.labelData.seriesGroupIndex[i]
+      switch (/** @type {any} */ (s).type || cnf.chart.type) {
         case 'bar':
         case 'column':
-          gl.barGroups.push(_s.group)
+          gl.barGroups.push(g)
           break
         case 'line':
-          gl.lineGroups.push(_s.group)
+          gl.lineGroups.push(g)
           break
         case 'area':
-          gl.areaGroups.push(_s.group)
+          gl.areaGroups.push(g)
           break
       }
     })
     // Uniquify the group names in each stackable chart type.
     /**
-     * @param {string} v
+     * @param {number} v
      * @param {number} i
-     * @param {string[]} a
+     * @param {number[]} a
      */
     gl.barGroups = gl.barGroups.filter((v, i, a) => a.indexOf(v) === i)
     /**
-     * @param {string} v
+     * @param {number} v
      * @param {number} i
-     * @param {string[]} a
+     * @param {number[]} a
      */
     gl.lineGroups = gl.lineGroups.filter((v, i, a) => a.indexOf(v) === i)
     /**
-     * @param {string} v
+     * @param {number} v
      * @param {number} i
-     * @param {string[]} a
+     * @param {number[]} a
      */
     gl.areaGroups = gl.areaGroups.filter((v, i, a) => a.indexOf(v) === i)
 
@@ -796,9 +792,10 @@ class Range {
           ticks = gl.dataPoints - 1
         }
       } else if (cnf.xaxis.tickAmount === 'dataPoints') {
-        if (this.w.seriesData.series.length > 1) {
-          ticks = this.w.seriesData.series[gl.maxValsInArrayIndex].length - 1
-        }
+        ticks = Math.max(
+          1,
+          (this.w.seriesData.series[gl.maxValsInArrayIndex] || []).length - 1,
+        )
         if (this.w.axisFlags.isXNumeric) {
           const diff = Math.round(gl.maxX - gl.minX)
           if (diff < 30) {
@@ -877,9 +874,30 @@ class Range {
         // On its side the chart draws one band per row and one label per
         // band, so each band is labelled with its own row's x. The evenly
         // spaced ticks put "Jan 03" against the row that holds Jan 04.
-        this.w.labelData.labels = /** @type {any} */ (
-          (this.w.seriesData.seriesX[gl.maxValsInArrayIndex] || []).slice()
-        )
+        // Series that do not share their x values get a band for every x any
+        // of them has, in the longest series' direction, and each bar sits in
+        // its own x's band (bar/Helpers barRow).
+        const rows = (
+          this.w.seriesData.seriesX[gl.maxValsInArrayIndex] || []
+        ).slice()
+        const seen = new Set(rows)
+        const n = rows.length
+        if (cnf.chart.type === 'bar') {
+          this.w.seriesData.seriesX.forEach((s) =>
+            s?.forEach((x) => {
+              if (x != null && !seen.has(x)) {
+                seen.add(x)
+                rows.push(x)
+              }
+            }),
+          )
+        }
+        if (rows.length > n) {
+          const dir = rows[0] > rows[n - 1] ? -1 : 1
+          rows.sort((a, b) => (a - b) * dir)
+          gl.dataPoints = rows.length
+        }
+        this.w.labelData.labels = /** @type {any} */ (rows)
       } else if (isXNumeric) {
         this.w.labelData.labels = /** @type {any} */ (
           gl.xAxisScale.result.slice()
@@ -1073,10 +1091,9 @@ class Range {
     if (!this.w.seriesData.series.length) return
     const gIdx = this.w.labelData.seriesGroupIndex
     // [positive, negative] sums per stack: the series group (by index, groups
-    // may reuse names), then the x value on a numeric axis as stacked columns
-    // and lines draw (#4886), else the ordinal (horizontal bars stack by it).
-    const byX =
-      this.w.axisFlags.isXNumeric && !this.w.config.plotOptions.bar.horizontal
+    // may reuse names), then the x value on a numeric axis as stacked bars and
+    // lines draw (#4886), else the ordinal.
+    const byX = this.w.axisFlags.isXNumeric
     /** @type {Map<string, number[]>} */
     const stacks = new Map()
 
@@ -1108,9 +1125,7 @@ class Range {
 
           const v = this.w.seriesData.series[i][j]
           if (stackSeries && v !== null && Utils.isNumber(v)) {
-            v > 0
-              ? (st[0] += parseFloat(String(v)) + 0.0001)
-              : (st[1] += parseFloat(String(v)))
+            v > 0 ? (st[0] += v * 1.000001) : (st[1] += +v)
           }
         }
       },

package/src/modules/RendererController.js

@@ -143,7 +143,9 @@ export default class RendererController {
         return this._activeKind
       }
       // The backend was requested/auto-selected but its feature isn't bundled.
-      if (mode === desired) {
+      // resolve() runs every render, so say it once per chart.
+      if (mode === desired && !this._warned) {
+        this._warned = 1
         warnMissingFeature(
           `\`chart.renderer: '${desired}'\``,
           `renderer-${desired}`,
@@ -152,10 +154,15 @@ export default class RendererController {
           },
         )
       }
-    } else if (mode === 'canvas' && hasCanvasUnsupportedFeature(this.w)) {
+    } else if (
+      mode === 'canvas' &&
+      !this._warned &&
+      hasCanvasUnsupportedFeature(this.w)
+    ) {
       // Explicit canvas, but a configured feature (gradient/pattern/image fill,
       // or a state color-matrix filter) can't render on canvas yet: 'auto'
-      // declines silently, explicit 'canvas' says why.
+      // declines silently, explicit 'canvas' says why (once).
+      this._warned = 1
       console.warn(
         `[apexcharts] renderer:"canvas" requested but this chart uses a feature the ` +
           `canvas renderer does not render yet (gradient/pattern/image fill or a ` +
@@ -163,6 +170,13 @@ export default class RendererController {
       )
     }
 
+    // Leaving a non-SVG backend frees it (display list, bitmap); the factory
+    // builds a fresh one if the chart crosses back.
+    const prev = this._instances[this._activeKind]
+    if (prev) {
+      prev.destroy()
+      delete this._instances[this._activeKind]
+    }
     this._activate('svg', this.svg)
     return this._activeKind
   }

package/src/modules/Scales.js

@@ -655,6 +655,19 @@ export default class Scales {
       ;/** @type {any} */ (gl).yAxisScale[index] = []
     }
 
+    // Zero, a negative or the MIN_VALUE sentinel has no logarithm. The floor
+    // was the base, clipping smaller values: drop it to the power of the base
+    // at or below the smallest positive value this axis plots.
+    if (y.logarithmic && minY <= Number.MIN_VALUE) {
+      const s = this.w.seriesData.series
+      const map = gl.isMultipleYAxis && gl.seriesYAxisMap[index]
+      const b = y.logBase || 10
+      const m = (map ? map.map((i) => s[i]) : s)
+        .flat()
+        .reduce((a, v) => (v > 0 && (!a || v < a) ? v : a), 0)
+      minY = m && Math.min(b, b ** Math.floor(Math.log(m) / Math.log(b)))
+    }
+
     const range = Math.abs(maxY - minY)
 
     // A log scale is degenerate when the domain spans less than one full
@@ -719,15 +732,25 @@ export default class Scales {
       // no data in the chart. Either all series collapsed or user passed a blank array
       gl.xAxisScale = this.linearScale(0, 10, 10)
     } else {
-      const ticks = gl.xTickAmount
-
-      gl.xAxisScale = this.linearScale(
-        minX,
-        maxX,
-        ticks,
-        0,
-        w.config.xaxis.max === undefined ? w.config.xaxis.stepSize : undefined,
-      )
+      const x = w.config.xaxis
+      // a fixed max or a streaming range window wins over the step
+      let step = (x.max ?? x.range) === undefined ? x.stepSize : undefined
+      // A step fixes the tick count and the axis ends on the last step. One
+      // too fine to draw keeps the default count instead.
+      const fit = step > 0 && !gl.isBarHorizontal && x.type !== 'datetime'
+      if (fit) {
+        const n = Math.ceil((maxX - minX) / step - 1e-9)
+        n > 1e3 ? (step = undefined) : (gl.xTickAmount = n)
+      }
+
+      let s = this.linearScale(minX, maxX, gl.xTickAmount, 0, step)
+      if (fit && step) {
+        // linearScale rounds the step, so it can fall short of the data
+        while (s.niceMax < maxX)
+          s = this.linearScale(minX, maxX, ++gl.xTickAmount, 0, step)
+        gl.maxX = s.niceMax
+      }
+      gl.xAxisScale = s
     }
     return gl.xAxisScale
   }