apexcharts 7.6.0

💎 Version 7.6.0

on Node.js NPM

Two things to opt into. icicle is a cartesian partition chart: one band per level of a hierarchy, each child sized inside its parent, and a click zooms along the value axis while the levels stay put. It ships in its own bundle, so the default build does not carry it:

import ApexCharts from 'apexcharts/icicle'

tooltip.interactive holds a tooltip open while the pointer crosses into it, which is what makes a link or a button inside a custom tooltip reachable at all. Off by default, and it overrides followCursor, because a tooltip that trails the cursor can never be entered.

The Playwright interaction suite now runs in CI on every push and pull request. It had been green on developer machines and ungated for months, and it caught a stacked-total label regression within a day of being switched on.

Both are dist/apexcharts.min.js gzipped at the default level, which is the figure npm run build prints.

Upgrading is npm install apexcharts@7.6.0.

✨ New

Add the icicle chart type, opt-in

chart.type: 'icicle' draws a hierarchy as stacked bands, one per depth level, each child cell nested inside its parent's extent along the value axis. It is the sunburst's layout in cartesian coordinates and shares its recursion, so it takes the data model we already resolve: a native children tree, or an existing drilldown config read as plain data with no dependency on the drilldown runtime.

What it adds over the two partition charts we had: labels that stay horizontal and legible at every depth, depth as a straight axis so same-depth siblings line up across branches, and direction: 'up', the flame-graph orientation, for call stacks and path funnels.

Opt-in, per the new-chart-type policy. The default bundle carries no icicle code, only the settings literals and a few string branches, and the type is reached with import ApexCharts from 'apexcharts/icicle' or by loading dist/icicle.js after the core script. Measured on the minified UMD: +508 B gzipped by default, 9,768 B gzipped for the apexcharts/icicle bundle itself, which contains no other chart class.

Four defaults differ from the sunburst's, each because filling the plot is what a treemap does and an icicle has to read as a hierarchy: leaf: 'stop' ends a shallow branch at its own band, leaving the white space that shows how deep each branch goes; tint: 0 keeps one hue per branch so the eye can follow it down; the palette lands on the shallowest level that branches, because a single-root tree is the normal shape here and colouring by root would paint everything one hue; and the legend is off, since every cell carries its own label.

Also reserves the name. registerSeriesType's built-in check asks whether a class is registered, which for an opt-in type is false on the default bundle, so a custom type could have taken icicle and then been routed to the built-in's renderer. RESERVED_TYPES closes it for this type and the next one.

Zoom along the value axis, leaving the levels alone

Clicking a branch re-laid the chart out on both axes: the branch became the top level and every band moved, which is a re-layout rather than a zoom. The reader loses their place, and the ancestors that gave the branch its meaning leave the screen.

plotOptions.icicle.zoomType: 'value', now the default, rescales the value axis only. The branch stretches to fill the width, its subtree stretches with it, and no level moves a pixel. The ancestors stay above it, clamped to the plot, which is what makes them read as context bands. It is one affine map over extents that are already laid out, and it is the partition equivalent of chart.zoom.type: 'x'.

The values are not named 'x' and 'y' because direction decides which screen axis the value axis is; 'value' and 'both' mean the same thing whichever way the tree grows. 'both' keeps the old behaviour for charts that would rather spend the whole plot on the focused branch.

A depth cap follows the focus down in value mode, or zooming into a branch marked as having more below it would stretch it and reveal nothing, which is the one promise that mark makes.

🐛 Fixes

Data labels on a 100% stacked combo

Closes #2429

Thanks @gioboa.

Ignore followCursor for interactive tooltips

No detail was written on this commit.

Thanks @lovasoa.

Restore animations when reduced-motion is turned off

Honoring prefers-reduced-motion was a one-way trip. A viewer who had the OS preference on when a chart mounted got a chart that never animated again, for the life of the page, even after they turned the preference back off.

The policy wrote enabled = false straight into w.config, which is the merged config that every update merges onto. Nothing ever put the original value back, and no merge could: an updateOptions({ series }) carries no opinion about animations, so the false survived it, and the next render read the same false the previous one had left behind. The media query was re-read on every render, faithfully, into a decision that could only ever go one way.

So the disable is now a latch. The values it overwrites are held in globals and restored the moment the query stops matching.

One wrinkle: while the latch is engaged the config reads false because we put it there, so an updateOptions that turns animations back on in that window would be lost when the preference lifted. Anything that is no longer false therefore gets re-stashed as it arrives. The mirror case, an explicit enabled: false sent while the latch is engaged, is indistinguishable from our own and restores the older value instead; closing that needs user intent threaded through every merge site, which is a poor trade for a case reachable only by toggling an OS setting mid-session. It is written down in the JSDoc.

Reported as animations not working at all, with the detail that made it solvable: they worked on mobile and not on desktop. That is the shape of an accessibility preference, not of a chart bug, and it is the only environment-dependent switch in the library.

Fixes #5312

Address comments

No detail was written on this commit.

Thanks @gioboa.

Keep the baseline of a series declared hidden in the config

ApexCharts.create() collapses every series carrying hidden: true before parseData() runs, so the baseline that parse snapshots into globals.initialSeries holds data: [] for each of them. Until 7.4.0 the first legend interaction repaired that by accident, because parseData() re-snapshotted unconditionally. It no longer does: the legend's own updates pass overwriteInitialSeries: false so that an internal re-render keeps the baseline it was given (#5283), and the emptied rows are now permanent.

Two readers get the wrong answer:

• Series.resetSeries() clones the baseline into config.series, so a series
  declared hidden comes back from a reset EMPTY and its data is gone for the
  life of the chart;
• Tooltip.tooltipUtil.isInitialSeriesSameLen() filters out collapsed rows but
  measures the rest, so the moment the viewer un-hides one from the legend its
  length of 0 is compared against its siblings'. The check fails,
  handleStickyCapturedSeries() falls to create(..., false), and every
  shared tooltip on the chart silently drops to the single series nearest the
  cursor. Re-hiding the series filters it out again and the tooltip comes
  back, which is what makes it read as a tooltip bug rather than a data one.

Restore the caller's own data for exactly the rows the hidden flag emptied. The raw-stash baselines (histogram, dumbbell, streamgraph, waterfall, treemap and the dataReducer window) are left as parseData() wrote them, and a row whose input is itself empty is skipped, so the repair can never turn a good baseline into an empty one.

Sibling of #5118, which is the same hazard one snapshot over: initialConfig lost a collapsed series' data for a different reason and was fixed by copying the series objects at capture time.

6 tests in tests/unit/config-hidden-series-baseline.spec.js; 4 of them fail on main. Full unit suite 151 files / 3495 tests green, eslint clean, and tsc --noEmit reports the same 29 pre-existing errors as main.

Co-Authored-By: Claude Opus 5 noreply@anthropic.com

Thanks @mrash.

Source the hidden-series baseline repair from the collapse record

Review feedback on #5313: read the repaired data from the record getSeriesAfterCollapsing already stores in gl.collapsedSeries / gl.ancillaryCollapsedSeries rather than from ser[i].data.

On the first pass the two are the same array, so this changes nothing there. They diverge on the one re-entry that also passes overwriteInitialSeries: true. hidden stays on the config row, so hiddenAtInit fires again, and by then appendData() has concatenated the new points onto the LIVE row -- which the collapse emptied. ser[i].data is therefore just the points that were appended, and the repair was writing those over a baseline that should still hold the series. With B declared hidden and appendData([{ data: [7] }, { data: [8] }]) the baseline for B became [8]; the record still held [4, 5, 6] and now that is what lands. It also composes with #5310, which appends into that same record.

The record's array is sliced rather than aliased in. initialSeries' setter keeps a shallow copy and _initialSeriesPeek hands it straight to the tooltip's same-length check, so sharing the array would let a later in-place edit of the record reach a captured baseline -- the one hazard the snapshot is built to rule out. .slice() is what getSeriesAfterCollapsing and riseCollapsedSeries already do at this boundary.

A non-axis collapse records one slice's VALUE, not a series' rows; the Array.isArray check leaves those rows to parseData, as the previous ser[i].data shape test did.

2 tests added to tests/unit/config-hidden-series-baseline.spec.js: the append case (red before this commit, [8] where [4, 5, 6] is expected) and a guard that the record is not aliased into the baseline. Spec is 8/8. Rebased onto main: unit suite 152 files / 3527 tests green, eslint clean, and tsc --noEmit reports 23 errors, the same 23 as main.

Co-Authored-By: Claude Opus 5 noreply@anthropic.com

Thanks @mrash.

Let respectReducedMotion:false reach the stylesheet

respectReducedMotion: false only ever half worked. It turned the JS tweens back on, and no JS flag can reach a stylesheet, so the @media (prefers-reduced-motion: reduce) block in apexcharts.css went on flattening every duration inside .apexcharts-canvas to 0.01ms with !important. Everything CSS-driven stayed frozen: the pie slice-offset slide, the tooltip and crosshair fades, the drilldown spinner. The only way out was to out-specify an !important rule from the page.

That block is now scoped :not(.apexcharts-ignore-reduced-motion), and Core.setupElements puts the class on the canvas when the option is false. elWrap is rebuilt on every render, so an updateOptions that flips the flag is picked up with no extra bookkeeping.

The reduced-motion fallback for the drilldown spinner had never actually run. It swaps the spin for an opacity pulse, which is what 2.3.3 asks for while still showing that the drill is working, but the blanket rule flattened the fallback too, to a single 0.01ms pass, leaving a drill with no loading indication at all. It now beats that rule on both specificity and origin.

The pie slide also gained a single styling hook. Every node that travels with a slice carries apexcharts-slice-mover, so a page no longer has to know the list (the arc, its labels, any external label group, the hover band) and write a selector per member, or discover the omission when the labels are left behind mid-slide. The hover outline band is one node re-plotted per slice rather than one node per slice, so it drops the class as it retargets: it has to jump to a newly hovered slice, and clearing the inline transition cannot cancel a page's rule on the hook.

The new tests assert computed style, not the inline value the library writes. That distinction is the whole bug. The library was already setting transition: transform 320ms on the slice and the browser was throwing it away, so a test that read node.style passed throughout. The spinner test mounts the overlay through DrilldownLoading rather than building a div, since the scoped fallback only reaches it because it lands in elWrap.

Prepend the injected stylesheet so page rules win

The sheet was appended to <head>. It is injected when the first chart renders, which is long after the page's own <link>s have parsed, so appending put it last in the cascade: an author rule at equal specificity lost on document order alone, wherever they had put it, and the only way through was to out-specify us by repeating a class.

Prepending makes the library the weakest author styles on the page, which is what a library's defaults should be, and matches what the Shadow DOM branch has always done with the shadow root.

Nothing load-bearing is weakened by the move. direction: ltr !important on the canvas is there to beat a direction inherited from an RTL page, and inheritance loses to any declaration at all. The transition: none in .apexcharts-disable-transitions * is there to beat our own transition declarations, which sit in the same sheet, so their order relative to it has not changed. Both now lose only to a page's deliberate, targeted !important override, which is the point of the move rather than a cost of it.

Also drops the .resize-triggers and .contract-trigger rules and the resizeanim keyframes they drive. Resize detection has been built on ResizeObserver for a long time and nothing creates those elements any more, so the rules were dead. They were also the only un-namespaced selectors in the sheet, which is the last thing that should be sitting at the bottom of the cascade waiting to collide with a page.

Keep a hierarchy branch that omits its own value

A partition chart may leave a branch's value out and let it be the sum of its children. That is the documented shape, and the hierarchy resolver already fills it in, in Hierarchy.fillValues.

It never got that far. Non-axis parsing runs first and required every datum to carry both x and y, so a branch with only children was dropped with a warning about pie data. With every branch dropped the series came back empty, and the renderer returns before it builds the tree, so the chart drew nothing at all: a blank plot and a warning naming the wrong chart type.

The sum is the same number either way, so roll the subtree up here. Sunburst has had this hole since it shipped; only its samples, which all give their top-level nodes a y, hid it.

The helper stays private to the module deliberately. Data.js is a shared module, so a named export here would resolve to undefined inside the split bundles.

Let rangeArea charts scale the y axis to their data

No detail was written on this commit.

Thanks @mmilanovic4.

Run a zoom on the interaction clock

Clicking a cell took 800ms, which reads as lag rather than motion. The zoom was pacing itself with animations.speed, the clock for the FIRST render, where a response to a click belongs on dynamicAnimation.speed alongside every other update. Measured on the sample, the focused cell now finishes its stretch in 350ms instead of 800.

The guard sets the two clocks far apart, so a zoom that went back to reading the intro's speed would still be moving when the assertion runs rather than failing on a tolerance.

Classify the stacked-100 label formatter from config

gridPadForStackedTotalDataLabels measures the stacked-total label during plotCoords(), before plotChartType builds globals.columnSeries. The formatter installed by stacked100() branched on columnSeries alone, so the reserve measured "5700" while the drawn label read "5700%" — under-reserving by the "%" and pushing the label past the SVG viewport on a horizontal 100% stack. Fall back to a config-based bar classification until columnSeries exists, as CoreUtils.getPercentSeries already does.

Thanks @lovasoa.

Refuse a click that has nowhere to zoom

A tree with one root is the ordinary icicle and the only flame-graph shape, and clicking that root did something: it became the focus. The layout came back identical, because a single root owns the whole value axis whether it is reached as the focus or through the roots loop, so the visible result was a breadcrumb rising for a view the reader had never left.

resolveFocus now resolves a lone root to the whole tree, the way it already resolved a leaf to its parent branch. It needs the roots to know a root is alone, so the signature takes them as an optional third argument; without them the old behaviour stands, which is what the sunburst still gets.

The same function also moved its "nothing changed" check to after the leaf demotion. It ran before, so clicking a leaf inside the focused branch reported a change with the focus unchanged and re-ran a layout pass to redraw the same picture.

A refused click has to look refused, so two things follow it. The cursor is now decided per layout instead of once at cell creation, and reads pointer only where a click would move the view: otherwise the root advertises a zoom it will not perform, which is a worse lie than the old no-op. And the breadcrumb drops the lone root's crumb, since the strip already opens with a crumb for the whole tree and relabels it, which put the same view in the trail twice with the second copy dead.

Propagate interactive tooltip mouseleave to grouped charts

Mirror the deferred seriesHover close on the tooltip's own mouseleave, so leaving the tooltip hides siblings in the same chart.group. Add a second grouped spec covering the tooltip-exit path.

Thanks @lovasoa.