⬆️ Upgrade dependency apexcharts to v6

[renovate]

This PR contains the following updates:

Package	Change	Age	Confidence
apexcharts (source)	^5.0.0 → ^6.0.0

---

Release Notes

apexcharts/apexcharts.js (apexcharts)

v6.4.0: 💎 Version 6.4.0

Compare Source

A feature release centered on heatmaps and a new bar chart race. Heatmaps gain a continuous numeric and datetime x-axis (cells positioned by real value, not by column index), optional canvas rendering for large grids, and a tooltip that now points at the cell it describes. The bar chart race animates bars and their labels as they re-rank. Two fixes round it out. Existing configs mostly render unchanged; three heatmap defaults change (tooltip placement, zoom, and label thinning), each noted below with how to restore the previous behavior.

✨ Features

Continuous numeric and datetime x-axis for heatmaps

On a numeric or datetime heatmap, cells are now placed at their real x value instead of being tiled one per column by index. Irregular spacing and gaps therefore render as real empty space: a missing hour is a gap in the grid, not a column squeezed away, and the axis shows sparse proportional date and time ticks rather than one label per cell. Rows stay categorical (one series per row).

Canvas cell rendering for large heatmaps

With chart.renderer: 'canvas' (or 'auto' past the render threshold) and the tree-shakable canvas feature imported, heatmap cells now paint to a single canvas instead of one <rect> per cell.

Heatmap cells	SVG	canvas
10,000	95 ms	27 ms
50,000	519 ms	170 ms
100,000	1,083 ms	388 ms

import ApexCharts from 'apexcharts'
import 'apexcharts/features/renderer-canvas'

const options = {
  chart: {
    type: 'heatmap',
    renderer: 'canvas', // or 'auto' to switch above rendererThreshold
  },
  // ...series
}

Bar chart race

A reorder update now animates into a bar chart race. When you re-sort the data and update the chart, the bars slide to their new ranks and their category labels ride along automatically (whenever dynamicAnimation is on). Two opt-in flags complete the effect: dataLabels.animate rides each value label to its bar's new position, and dataLabels.countUp tweens the number from its previous value.

const options = {
  chart: {
    type: 'bar',
    animations: { dynamicAnimation: { speed: 800 } },
  },
  plotOptions: { bar: { horizontal: true } },
  dataLabels: {
    enabled: true,
    animate: { enabled: true }, // value labels ride to the new rank
    countUp: { enabled: true }, // and count up or down from the last value
  },
}
// On each frame, re-sort your data and call updateOptions with the new series
// and categories. Bars, category labels, and value labels animate to the new
// order together.

Both label flags are off by default and apply to bar and column charts. Rotated axis labels ride correctly too.

🔧 Behavior changes (heatmap defaults)

The heatmap tooltip is anchored above the cell

The heatmap tooltip now sits centered above the hovered cell with a downward arrow pointing at it, flipping below when the cell is against the top edge.

🐛 Fixes

• Light series no longer wash to white on hover. The lighten hover filter pushed already-bright fills all the way to white, so light-colored series lost their hue when hovered. The filter now preserves the color.
• dataReducer no longer mutates your data. With zoom-aware downsampling active, the reduced (windowed) view was written back into the original series array, which is shared by reference, so later re-renders started already downsampled and could never recover the full-resolution points. The reducer now operates on a detached copy, leaving your input intact.
• Custom tooltips keep their arrow. A tooltip.custom function replaced the tooltip's inner HTML, which discarded the arrow element. The arrow is now preserved across custom content, for every chart type.

TypeScript

dataLabels.animate and dataLabels.countUp (bar chart race) are typed on ApexDataLabels.

Compatibility

• No breaking API changes, and no renamed or removed options.
• Three heatmap defaults change (tooltip placement, zoom off, y-label thinning), each with a documented opt-out above.

v6.3.0: 💎 Version 6.3.0

Compare Source

A performance release focused on updates. updateSeries is now genuinely incremental: a data-only update repaints the series and refreshes the axis chrome in place instead of tearing the chart down and rebuilding it, so streaming and frequently-updating charts are several times faster. Large-series initial render is also markedly quicker from shared parsing work. There are no API changes and no new options: the rendered output is verified identical to 6.2.0, so existing configs render exactly as before, just faster.

The numbers below are 5-trial medians (initial render) and per-cycle medians (updates) from the reproducible harness behind the "100,000 Points" rendering benchmark, measured back to back on one machine (headless Chromium, animations off, identical seeded data).

⚡ Performance

updateSeries is now incremental

Previously every updateSeries call re-ran the full render pipeline: parse, re-layout, and a complete DOM rebuild. It now takes a fast path that repaints only the series layer and, when the axis scale changes, redraws the grid and axes in place within the frozen layout. The canvas renderer repaints its existing bitmap instead of recreating the backing store. Anything the fast path cannot reproduce exactly (a change in series count or data length, collapsed or combo series, an active zoom) falls back to the full render automatically.

updateSeries cycle	6.2.0	6.3.0
50,000 points (canvas)	62.5 ms (16/sec)	4.1 ms (242/sec)
50,000 points (SVG)	66.7 ms (15/sec)	12.5 ms (80/sec)
10,000 points (canvas)	11.1 ms (90/sec)	1.3 ms (765/sec)
10,000 points (SVG)	11.1 ms (90/sec)	2.8 ms (362/sec)

Line and area initial render: roughly 2 to 3 times faster at high point counts

The parse pipeline no longer forces a deep clone of the series and several whole-series aggregate passes that most charts never read, and plain numeric [[x, y], ...] data now parses in a single typed pass that also computes the axis extrema inline (removing separate min/max scans). The path geometry itself was already fast; this release removes the surrounding per-render overhead.

Line, single series	6.2.0	6.3.0
100,000 points (canvas)	90 ms	29 ms
100,000 points (SVG)	106 ms	40 ms
50,000 points (canvas)	57 ms	25 ms
50,000 points (SVG)	65 ms	30 ms
10,000 points (canvas)	27 ms	19 ms

Scatter charts inherit the parsing wins

Scatter and bubble charts share the parse pipeline, so they pick up a portion of the same improvement without any scatter-specific work.

Scatter	6.2.0	6.3.0
50,000 points (canvas)	155 ms	120 ms
50,000 points (SVG)	571 ms	528 ms
20,000 points (canvas)	73 ms	60 ms

🐞 Fixes

• Data-only updates no longer leak DOM nodes. Because the incremental path preserves the chart DOM across updates instead of clearing it, two transient elements that the full render had always discarded were accumulating: a stray crosshair backing rect and the y-axis crosshair tooltip container, added once per update. On a continuously updating chart this grew without bound. Both are now reused across updates, so the node count stays flat over any number of updates. This matters most for real-time and streaming dashboards.
• Brushing or zooming after a linked-chart update works again. A chart updated in place by a crossfilter or linked view kept a stale reference to its grid geometry, so a subsequent range brush or drag-zoom drew an empty selection. It now reads the live geometry on each interaction.

🔧 Behavior changes (structural, not visual)

• The DOM subtree is preserved across updateSeries. Data-only updates now keep and update the existing series, axis, and grid elements rather than replacing them. Rendered output (SVG path data and canvas pixels) is verified identical; code that re-queries chart elements after an update by class or attribute continues to work, but code that cached a specific element node reference from before an update and relied on it being replaced should re-query instead.

Compatibility

• No new options, no changed defaults, no TypeScript changes.
• SVG path output and canvas pixels are verified identical to 6.2.0 across the snapshot suite; the fast path is held to the full render's output by a pixel-level oracle and by format-equivalence tests on the new parse path.
• Verified by the full unit, interaction, and end-to-end snapshot suites, plus new regression tests covering the incremental update path, the parse fast lane, and the per-update node-count guard.

v6.2.0: 💎 Version 6.2.0

Compare Source

A performance release. Large-series rendering is 30 to 45% faster in both renderers, and scatter charts create half the DOM nodes they used to. There are no API changes and no new options: the rendered output is verified byte-identical to 6.1.0, so existing configs render exactly as before, just faster.

The numbers below are 5-trial medians from the reproducible harness behind the "100,000 Points" rendering benchmark post (headless Chromium, animations off, identical seeded data).

⚡ Performance

Scatter and bubble charts: half the nodes, up to 45% faster

Markers now render into ONE apexcharts-series-markers group per series instead of one wrapper group per point. On a 50,000-point scatter that removes 50,000 groups, 50,000 event-delegation setups, and 50,000 clip-path writes from every render.

Scatter (SVG)	6.1.0	6.2.0
5,000 points	109 ms	69 ms
20,000 points	395 ms, 40,100 nodes	249 ms, 20,102 nodes
50,000 points	1,042 ms	575 ms

Per-point interactivity is unchanged: tooltips, dataPointMouseEnter / dataPointMouseLeave / dataPointSelection, marker hover states, and selection filters all read their identity from the marker paths themselves and keep working exactly as before. Discrete markers, per-point fillColor, bubble z-scaling, and null-value markers are unaffected.

Line and area charts: 36 to 43% faster at high point counts

Plain straight line and area series now take a numeric fast path: pixel coordinates are computed in one tight loop and the path string is assembled in a single join, skipping the per-point machinery that dominated large renders. Anything the fast path cannot reproduce exactly (null gaps, visible markers, data labels, stacking, combo charts, smooth and stepped curves) automatically falls back to the previous code path. The d attribute output is byte-identical either way.

Line, single series	6.1.0	6.2.0
100,000 points (SVG)	161 ms	103 ms
100,000 points (canvas)	166 ms	95 ms
50,000 points (SVG)	89 ms	63 ms
updateSeries cycle, 10,000 points	25 ms	16 ms

The updateSeries improvement applies to both renderers, so streaming and frequently-updating charts benefit as well.

Canvas renderer: batched marker painting

The canvas renderer (apexcharts/features/renderer-canvas) now paints markers as style batches: one fill/stroke state application per run of same-style markers, so a uniform single-series scatter collapses to a single batch. Non-circle marker shapes (square, triangle, diamond, star, cross, plus) reuse one cached geometry per shape and size, translated per marker, instead of building a path string and parsing it for every point. Line and area series painted on canvas consume the fast path's numeric coordinates directly, with no path-string parse at all.

🔧 Behavior changes (structural, not visual)

• One markers group per series. If custom CSS or JavaScript targeted the per-point .apexcharts-series-markers wrapper groups in scatter or bubble charts (for example, selecting the nth group to reach the nth point), there is now a single such group per series. The .apexcharts-marker paths inside it, including their rel, j, index, cx, cy, and default-marker-size attributes, are unchanged, so selectors that address markers directly keep working.

Compatibility

• No new options, no changed defaults, no TypeScript changes.
• SVG path output (d attributes) and canvas pixels are byte- and pixel-identical to 6.1.0 across the snapshot suite; only the wrapper-group structure noted above differs.
• Verified by the full unit, interaction, and end-to-end snapshot suites, plus new regression tests covering the series-level marker groups, the canvas marker batching, and the line fast path's byte-identity against the previous geometry code.

v6.1.0: 💎 Version 6.1.0

Compare Source

A focused follow-up to 6.0. The Measure ruler graduates into a first-class toolbar tool you can pre-select, toolbar tools can now be toggled off, and two interaction bugs are fixed. Everything is backward compatible: existing configs render unchanged.

✨ Features

Measure ruler in the toolbar

The measure / delta ruler (shipped in 6.0) is now a built-in toolbar tool, so it can be armed with a click instead of holding the measure key. The button appears automatically whenever the ruler is enabled, and can be pre-selected so the plot loads ready to measure.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/measure'

const options = {
  chart: {
    measure: { enabled: true },
    toolbar: {
      autoSelected: 'measure',   // pre-select the ruler on load
      tools: { measure: true },  // default; set false to keep it key-only
    },
  },
}

• The button shows only when chart.measure.enabled is true. tools.measure accepts true / false or a custom SVG string, like the other tools.
• toolbar.autoSelected now also accepts 'measure', so the plot loads armed and ready to drag with no key held and no click. The m key still works.
• Selecting the ruler is mutually exclusive with zoom / pan / selection. The icon matches the rest of the toolbar and follows the light / dark themes.

🔧 Behavior changes (on by default)

Toolbar tools toggle off on re-click

Clicking an already-selected zoom, pan, selection, or measure icon now deselects it, leaving the chart with no active tool. Previously those buttons were one-way (clicking the active tool did nothing). This makes the ruler's on / off state obvious and lets you drop back to a plain, gesture-free chart.

TypeScript

toolbar.tools.measure, the 'measure' value for toolbar.autoSelected, and the toolbar.measure locale string are all typed.

v6.0.0: 💎 Version 6.0.0

Compare Source

The largest release in the library's history. Version 6 turns a chart from a picture you look at into a surface you investigate, author, and share. Most of what follows is opt-in and tree-shakeable; existing configs keep working unchanged, and the zero-dependency, SVG-first identity is intact.

Two behaviors change by default (both respect prefers-reduced-motion and the existing dynamicAnimation.enabled escape hatch): data updates that add or remove points now animate coherently, and mobile pinch/pan gestures are on. See Fixes for the details.

✨ Features

Weave: public plugin platform

Publish reusable chart plugins to npm against a stable, versioned API. A plugin draws into its own sandboxed layer and subscribes to lifecycle hooks; it never touches raw internal state.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/weave'

ApexCharts.registerPlugin({
  name: 'watermark',
  apiVersion: 1,
  setup(api) {
    api.on('draw', ({ layer, scales }) => {
      layer.text({ x: 10, y: 20, text: 'ACME', size: '12px' })
    })
  },
})

// activate per chart
const options = { plugins: [{ name: 'watermark' }] }

• api.layer is a plugin-owned drawing surface (path/line/rect/circle/text); api.scales converts data to pixels; api.data, api.theme, and api.store round out the facade.
• apiVersion gates the contract so raw internals can keep changing safely. ApexCharts.unregisterPlugin(name) exists for tests and hot reload.

Strata: hybrid SVG + canvas renderer

Break the SVG node ceiling without leaving SVG behind. Below a threshold the output is identical SVG; above it, only the series layer becomes a <canvas> while axes, grid, tooltips, annotations, and exports stay SVG.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/renderer-canvas'

const options = {
  chart: { renderer: 'auto', rendererThreshold: 8000 }, // 'svg' | 'canvas' | 'auto'
}
// chart.getActiveRenderer() reports what is in use

• Canvas is live for line, area, bar, column, scatter, and candlestick, with shared tooltip, crosshair, zoom, pan, hover and legend dimming, and PNG/SVG export all working.
• Falls back to SVG automatically for canvas-unsupported features (pattern/image fills, color-matrix state filters). Per-point selection visuals and keyboard traversal on canvas remain SVG-only for now.

Marks: composable custom series types

Register a renderItem(datum, scales, api) function and get a first-class series: events, shared tooltip, legend, and keyboard navigation all work with no extra wiring.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/marks'

ApexCharts.registerSeriesType('lollipop', {
  renderItem({ x, y, api, color }) {
    api.line({ x1: x, y1: api.zeroY, x2: x, y2: y, stroke: color })
    api.circle({ cx: x, cy: y, r: 5, fill: color })
  },
})

const options = { series: [{ type: 'lollipop', data: [[0, 3], [1, 6], [2, 4]] }] }

Dumbbell, lollipop, and bullet ship as samples. Built-in type names are guarded against shadowing.

Rewind: history and undo/redo

Generic Ctrl-Z over a command journal. Zooms, series toggles, option changes, and annotation edits are recorded; high-frequency gestures coalesce into a single step.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/history'

const options = { chart: { history: { enabled: true, maxDepth: 100, coalesceMs: 250 } } }
// chart.history.undo(), .redo(), .jump(id), .transaction(fn, { label })

Perspectives: shareable view state

Serialize the exact view (zoom window, hidden series, selection, annotations, theme) into a compact token you can put in a URL and restore anywhere.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/perspectives'

const token = chart.perspectives.capture()
const url = chart.perspectives.toURL()      // href with #apex=<token>
chart.perspectives.apply(token, { animate: true })
// also: .save(name), .list(); static ApexCharts.perspectives.fromURL(href)

Facet: design tokens and OS-aware themes

Charts read --apx-* CSS custom properties from the cascade, follow the operating system's light/dark and contrast preferences with no JS, and can reference named brand themes.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/facet'

ApexCharts.registerTheme('brand', { palette: ['#​4f46e5', '#​0ea5e9'], tokens: { accent: '#​4f46e5' } })

const options = { theme: { follow: 'os', name: 'brand' } }

:root { --apx-accent: #​4f46e5; --apx-grid: #e5e7eb; --apx-surface: #fff; }

chart.refreshTokens() re-reads the cascade after a runtime token change that does not itself trigger a render.

Cadence: pluggable easing

chart.animations.easing accepts a named curve, a cubic-bezier array, or a function. The default is unchanged, so existing charts animate exactly as before.

const options = { chart: { animations: { easing: 'easeOutBack' } } } // or [0.34, 1.56, 0.64, 1], or (t) => t*t
// ApexCharts.registerEasing('bounce', (t) => /* ... */)

A data-change override is available via chart.animations.dynamicAnimation.easing.

Linked Views: crossfilter and cross-chart coordination

Coordinate a group of charts without wiring. In highlight mode, brushing one chart dims the non-matching marks in the others (no redraw). A real crossfilter engine adds categorical click-filters, range brushes, a shared data-table, and a heatmap 2D matrix target.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/link'

// highlight mode, per chart
const options = { chart: { group: 'sales', link: { enabled: true, mode: 'highlight', dimOpacity: 0.2 } } }

// or a shared crossfilter engine
const cf = ApexCharts.crossfilter({ id: 'sales', records })

Ink Layer: direct-manipulation annotation authoring

Annotations become draggable and resizable, with click-to-create, snap to gridlines, and a floating editor card (inline rename, recolor, bold, font size, marker size and shape, delete). Every edit is undoable when Rewind is enabled.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/ink'

const options = { chart: { ink: { enabled: true, palette: true, snap: true } } }
// fires annotationDragged, annotationEdited, annotationStyled, annotationDeleted

Measure ruler

Hold a key and drag to read the change, percent, range, and slope between two points; on release the ruler pins as a data-anchored overlay that re-projects on zoom and resize.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/measure'

const options = { chart: { measure: { enabled: true, mode: 'span', key: 'm', pinOnRelease: true } } }
// or drive it from code: chart.startMeasure(), chart.stopMeasure(), chart.clearMeasures()
// fires `measured`

mode: 'span' is the finance-style vertical band with a change/percent/range readout; mode: 'free' is a diagonal ruler between two arbitrary points. Styling resolves through --apx-measure-* tokens.

Context menu (Radial Actions)

Right-click or long-press a data point for verbs that act at that exact point rather than chart-wide.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/context-menu'

const options = {
  chart: {
    contextMenu: {
      enabled: true,
      items: ['annotate', 'xline', 'yline', 'measure', {
        id: 'copy', label: 'Copy value',
        onClick: (ctx, { x, y, seriesIndex, dataPointIndex }) => {},
      }],
    },
  },
}

Built-in annotate / xline / yline items are ink-managed when the ink feature is bundled (they open the floating editor and undo via Rewind).

Storyboard: scroll-driven choreography (scrollytelling)

Pair prose sections with saved views. Scrolling a beat past the viewport trigger applies its view; scrolling back reverses it. Each beat can also merge an updateOptions payload so it can restyle or morph chart.type inside one animated transition.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/storyboard' // includes Perspectives

chart.storyboard.bind({
  beats: [
    { selector: '[data-apex-beat="1"]', view: { window: { xaxis: { min: 0, max: 10 } } } },
    { selector: '[data-apex-beat="2"]', view: { collapsed: [1] }, options: { chart: { type: 'area' } } },
  ],
})
// chart.storyboard.goTo(beat), .current(), .unbind(); fires beatChange

Real-time streaming: constant-velocity scroll

Rolling-window updates now scroll at constant velocity instead of warping in place, and chart.streaming bounds memory for long-running feeds.

const options = { chart: { streaming: { enabled: true, maxPoints: 100000 } } }
// appendData() trims each series to maxPoints (or the visible xaxis.range window)

The scroll animation itself needs no opt-in: any update that continues the previous window (appendData, or a shifted fixed-length updateSeries) translates smoothly.

🔧 Behavior changes (on by default)

Coherent variable-length data transitions

Updates that change the number of data points now animate as one coordinated motion instead of popping. Appended bars grow from the baseline, removed bars shrink into ghosts and fade out, line and area fills reshape over the union of old and new points (so they can never tear), and markers, bubbles, and axis tick labels ride along on the same clock. This also gives scatter and bubble charts dynamic-update animations for the first time, and bubbles tween their radius on z changes. Zoom re-projections animate their marks and ticks too.

Disable per chart with chart.animations.dynamicAnimation.enabled: false. Skipped automatically above chart.animations.largeDatasetThreshold and when prefers-reduced-motion is set.

Native-feeling mobile gestures (Momentum)

Two-finger pinch-zoom around the centroid, two-finger pan, and kinetic inertia after a one-finger flick, with axis rails so a vertical swipe still scrolls the page. Configurable via chart.zoom.pinch and chart.pan.inertia.

🐛 Fixes

• Scatter jitter zoom: zooming a jitter strip plot now snaps the window to whole bands, so x-axis labels no longer vanish on zoom-in and the first and last dot clouds are no longer half-cropped on zoom-out.
• render() is idempotent: a repeated render() call (including a framework double-invoking an effect) returns the same promise instead of building a duplicate chart in the same element. destroy() clears it so an instance can render fresh; a rejected render clears itself so callers can retry.
• Legend toggle: hideSeries / showSeries / toggleSeries no longer silently no-op under strict CSS selector engines (the series lookup no longer relies on an escaped-colon attribute selector).
• Area morph: fixed a long-standing malformed pathFrom (double z) that fed the animation engine an invalid command list on area updates.

📦 Tree-shaking

Every feature above ships as a tree-shakeable entry (apexcharts/features/*) registered through the feature registry; the core stays lean. See the tree-shaking guide for the complete list of entry points.

TypeScript

Full type definitions ship with the package (no @types/* install). 6.0 adds types for every new config namespace and API, plus the SSR statics (renderToString, renderToHTML, hydrate, hydrateAll, isHydrated).

v5.16.0: 💎 Version 5.16.0

Compare Source

✨ Features

Drilldown navigation (opt-in)

Click a data point to drill into a child level, with a breadcrumb trail and back navigation. Supported on bar, column, pie, donut, treemap, and heatmap. Tree-shakeable: import the feature and enable it.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/drilldown'

const options = {
  chart: {
    type: 'bar',
    drilldown: {
      enabled: true,
      series: [
        { id: 'fruits', name: 'Fruits', data: [{ x: 'Apple', y: 40 }, { x: 'Banana', y: 30 }] },
      ],
      // breadcrumb: { show: true, position: 'top-left', rootLabel: 'All' },
      // animation: { zoomFromPoint: true }, // unfold the child from the clicked point
      // onDrillDown: async ({ point }) => fetchChild(point), // async level loading
    },
  },
  series: [{ name: 'Categories', data: [{ x: 'Fruits', y: 70, drilldown: 'fruits' }, { x: 'Vegetables', y: 55 }] }],
}

• Child levels are declared inline in chart.drilldown.series, or fetched on demand via onDrillDown.
• Breadcrumb is configurable (position, separator, rootLabel, formatter) and includes a back-arrow.
• Optional animation.zoomFromPoint unfolds the child level outward from the clicked point (and folds back on drill-up).

Pie / donut external (outer) data labels with leader lines (opt-in)

Render each slice's name outside the pie, connected by a leader line, so users no longer need to map legend colors back to slices. Pie and donut only (ignored for polarArea). The percentage keeps rendering inside the slice.

plotOptions: {
  pie: {
    dataLabels: {
      external: {
        show: true,
        // formatter: (name, { percent }) => [name, percent.toFixed(1) + '%'],
        // connector: { show: true, width: 1, length: 16, gap: 6 },
      },
    },
  },
}

Scatter jitter: strip plots and overplotting (opt-in)

Spread overlapping scatter points apart. Two uses, one engine. Offsets are in axis units, deterministic (SSR-safe), and applied to the drawn positions only, so tooltips still show the true values.

• Strip plots: pass compact { x: 'Category', y: [v1, v2, ...] } data. Each category becomes a band and its values scatter horizontally within it. Every value is a real, hoverable marker; the sticky tooltip follows the hovered dot.
• Overplotting: on ordinary { x, y } data, add small random offsets so dense clusters fan out.

plotOptions: { scatter: { jitter: { enabled: true, x: 0.35 /*, y: 0, distributed: false */ } } },
series: [
  { name: 'Frankfurt', data: [{ x: 'Frankfurt', y: [120, 118, 130, 109, 142] }] },
  { name: 'Mumbai', data: [{ x: 'Mumbai', y: [182, 176, 195, 168, 201] }] },
]

Marker styling reuses the standard markers / colors / fill config; set jitter.distributed: true to color each band separately.

Data reducer for range charts

chart.dataReducer now downsamples rangeArea and rangeBar series via min-max bucket aggregation (preserving the visual extremes of each bucket), complementing the existing LTTB reduction for line/area.

chart: { dataReducer: { enabled: true, threshold: 500, targetPoints: 250 } }

🐛 Fixes

• Drilldown: reset the legend-collapse state when drilling so a child level is not rendered with a parent's series hidden.

v5.15.2: 💎 Version 5.15.2

Compare Source

Fixes

Draw-animation frame no longer touches a destroyed chart

An animated chart (e.g. an area chart) schedules a requestAnimationFrame during render() to run its mask-reveal / draw animation. If the chart was destroyed before that frame fired, the stale callback ran against already-cleared DOM and threw:

TypeError: Cannot read properties of null (reading 'node')   // in runMaskReveal

The classic trigger is React StrictMode, which mounts → unmounts → remounts a component in development: the first mount queues the animation frame, the unmount calls destroy() (which nulls w.dom.elDefs), and the queued frame then fires against the torn-down chart. Any sufficiently rapid unmount hit the same race.

The fix adds an internal isDestroyed flag, set by destroy() (but not by updates), that the deferred draw-animation callbacks - mask reveal, stroke draw, and bulk reveal - check and bail on before touching the DOM. The flag is cleared on the next render, so re-mounting re-arms animations normally.

This complements the detached-chart destroy() fix in 5.15.1; together they resolve the teardown crashes tracked in react-apexcharts#602.

v5.15.1: 💎 Version 5.15.1

Compare Source

A small patch release with a single stability fix: charts that are torn down before they ever mount no longer throw.

---

Fixes

destroy() no longer throws on an un-mounted / detached chart

Calling destroy() (or an internal clear()) on a chart that never finished rendering threw:

TypeError: Cannot read properties of undefined (reading 'node')

This happened when a chart was constructed against an element that wasn't connected to the DOM - so create() bailed out early before building the SVG, leaving w.dom.Paper undefined - and the chart was then destroyed. Common triggers:

• A React useEffect cleanup (or a Vue unmounted hook) tearing the chart down before the element was ever attached.
• A queued resize/update() firing after the host element had already been removed.

The teardown path now guards on the SVG actually having been created, cancels any pending resize redraw, and tolerates a missing Apex._chartInstances registry, so destroying a never-mounted chart is a safe no-op.

Fixes react-apexcharts#602 and vue-apexcharts#256.

---

Configuration

📅 Schedule: (UTC)

• Branch creation
  • At any time (no schedule defined)
• Automerge
  • At any time (no schedule defined)

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.