fix(deps): update dependency apexcharts to v6 - #1292

v6.10.0: 💎 Version 6.10.0

Compare Source

A feature release built around one question: what if the arrangement of a chart's marks were something you could hand it?

The unit chart already drew one dot per thing counted, and 6.9.0 opened a seam for supplying the positions yourself. This release ships the thing that seam was for. apexcharts/unit-shapes is a companion kit of 39 shapes a count can take: a heart, a house, a globe, a checkmark, a heartbeat trace, or the figure 1,024 drawn in 1,024 dots. Each one is a function of the marks and the plot rectangle rather than a picture, so the same shape serves 40 dots in a sparkline and 3,000 in a poster.

Alongside it: outer name labels for those shapes, so a crowd of dots reads without a legend, and a fix worth reading even if you never draw a heart, because it swallowed any update that changed only a callback.

✨ New

apexcharts/unit-shapes, 39 shapes a count can take

A new entry point, tree-shaken per shape. Importing one costs about 4 KB gzipped; importing the catalog is not something you need to do.

import ApexCharts from 'apexcharts'
import { heart } from 'apexcharts/unit-shapes'

new ApexCharts(el, {
  chart: { type: 'unit' },
  series: [57600, 16800, 4200, 3400],
  labels: ['Repeat donors', 'First-time', 'Workplace drives', 'Emergency call-ups'],
  plotOptions: {
    unit: { layout: 'custom', positions: heart, unitValue: 100 },
  },
}).render()

A shape is a plain callable, so positions: heart needs no registration step, and plotOptions.unit.positions already accepted a function: nothing in the chart had to learn about shapes.

The dots are packed, not stamped onto a template. Rows are cut across the outline, each row split into the spans that fall inside it, and the gap between dots is then bisected until the spans hold exactly the number of marks the data asks for. Density follows the shape's own area, which is why one outline covers three orders of magnitude of dot count. A thin limb, fin or tip keeps its single dot rather than dropping out, because that is what stops a shape dissolving as the count falls.

Three kinds, because things in the world are not all areas:

• Silhouettes (29) fill an outline: heart, house, tree, leaf, flame, droplet, fish, sun, human, group, star, crown, trophy, moneybag, funnel, shield, gear, robot, bulb, flask, car, plane, rocket, battery, pin, mountain, cross, bolt, arrow.
• Strokes (7) pack a thickened centreline, for a thing with no interior: check, wifi, pulse, xmark, percent, question, spiral. A dotted checkmark still reads as a checkmark, which is how a stroke degrades where a thin silhouette feature would simply vanish.
• Generated (3) compute their positions from maths and have no outline at all: globe (latitude rings with a tilt), target (concentric bands), pyramid (tiers).

Every shape carries its metadata: which category it belongs to, how it was made, and minUnits, the count below which it stops being recognisable. Ask for fewer and the chart says so in a console warning naming the shape, rather than rendering mush.

Composition, rather than a bigger catalog

outlined(heart)                  // trace the outline instead of filling it
heart.with({ order: 'cols' })    // where each series band lands inside the shape
glyphs('1,024')                  // the number, drawn in that many dots
preview(heart, { series })       // -> an SVG string, no chart and no DOM

outlined() gives all 29 silhouettes a hollow twin for no new artwork, since a stroked closed path is a ring. The fill order is what decides where each category sits: rows bands a shape top to bottom, cols left to right (which is why battery fills like a charge meter), centerOut puts the first series at its heart. preview() renders a shape to standalone SVG, so docs galleries, README images and launch graphics can be generated at build time or on a server from the catalog alone.

Shapes are also registrable by name (ApexCharts.registerUnitLayout), and from a script tag dist/unit-shapes.js exposes the kit as ApexUnitShapes with every shape pre-registered.

On provenance: every outline in the kit was drawn in this repository. No third-party path is admitted, permissively licensed or not, because an outline ships verbatim inside the bundle: a copied path would make its licence notice travel into every consumer's build forever. Brand marks are excluded outright. A test enforces it.

Outer name labels for unit shapes

A shape packed with four categories used to need a legend, which asks the reader to match a swatch to a band. Names can now sit in the margin with a leader line to their own dots, the way a pie names its slices.

plotOptions: {
  unit: { clusterLabels: { external: { show: true } } },
}

The gutter is reserved on both sides before the dot size is chosen, so the shape is sized for the room it will actually get instead of being scaled down afterwards, and it stays centred. Each label anchors on a real dot of its own band, sides are assigned from how the bands are actually arranged, and crowded labels are spaced apart in one pass before they reach the DOM. The implementation is the one pie and donut already use, extracted rather than rewritten.

Samples

Twenty new unit demos, one per shape family, including a gallery that switches between all 39 shapes with the same dots flowing from one arrangement into the next. Palettes use separated hues rather than tints of one colour: at dot size a lightness ramp cannot be read back, and the palest end disappears against the card.

🐛 Fixes

An update that changes only a function no longer vanishes

update() skips a redundant render by comparing the incoming options with the previous ones, and that comparison went through JSON.stringify, which drops function values. Two configs differing only in a callback therefore serialised identically and the update was thrown away.

Any function-valued option was affected: a new dataLabels.formatter, a new custom tooltip, a new plotOptions.unit.positions. The first such update always worked, since there was nothing to compare against yet, which is what made it look like a rendering problem rather than an update problem.

Functions are now compared by identity: passing the same function twice still skips, so the optimisation keeps paying, while a different one gets the render it asked for. A caller who builds a fresh closure on every update now gets a render every time, which is the safe direction to err in, since the closure may capture new state.

Millisecond resolution survives a Date on a datetime axis

A data point whose x is a Date object had its milliseconds truncated, so points inside the same second collapsed onto each other. The type definitions also refused a Date there, despite it being the natural thing to pass. Thanks to @​aron-intframe (#​5277).

🔧 Internal

• the unit and unit-shapes sub-entry artifacts are built and published, so apexcharts/unit and apexcharts/unit-shapes resolve for bundlers and script tags alike
• shape geometry is covered by its own suite: containment against the outline it claims, spacing, the exact-count guarantee at every dot count, provenance, and a cross-check that the catalog, the exports and the type definitions can never disagree
• two authoring tools ship with the repo rather than the package: a contact sheet that renders every shape at a given count, and a winding checker that catches a subpath which would punch a hole where it meant to fill

Full Changelog: apexcharts/apexcharts.js@v6.9.0...v6.10.0

v6.9.0: 💎 Version 6.9.0

Compare Source

A feature release, and the largest in a while. Two ideas run through most of it.

The first: a chart should be able to take the measurements you actually have. Three types now accept raw observations and do the statistics themselves, and rowSeries() hands the individual rows back so a mark can be opened into the data behind it.

The second: one chart type can become another, in place. The cross-type morph engine stops crossfading and starts conserving the ink, so a bar visibly comes apart into the dots it was counting, and every pairing between the mark families is now offered rather than only the ones that had been driven.

Alongside those: nested treemaps, drilldown for line and area plus async levels that survive a real backend, a pluggable layout seam for the unit chart, and spring motion where a fixed tween used to stutter.

One change worth knowing before you upgrade: ApexCharts is no longer dependency-free. It now requires apex-commons at runtime (see Internal). npm resolves it for you and the browser bundles inline it, so no action is needed, but it is a change in the package's shape.

✨ New

chart.type: 'histogram', a chart that takes a sample

Every other type here wants values that were already aggregated. A histogram is the one that does the aggregating: the series carries raw observations, one number per event, and the chart chooses the bin width and counts them.

chart: { type: 'histogram' },
series: [{ name: 'Latency', data: [102, 87, 143, 91, ...] }]

It renders through the bar pathway, like funnel, pyramid, gauge and waffle, so bins are drawn by code that already handles stacking, zoom, export and animation.

plotOptions.histogram.bins takes a rule ('auto' | 'fd' | 'sturges' | 'scott' | 'rice' | 'sqrt') or a fixed count. binWidth pins the boundaries when they carry meaning, range frames the axis independently of the data, normalize switches the y units to percent or density, and cumulative gives a CDF. 'auto' takes the narrower of Freedman-Diaconis and Sturges.

All series share one set of edges derived from their combined extent, so two distributions stay comparable instead of putting different bars at the same x. plotOptions.histogram.overlap (default true) then draws each series across the full bin rather than grouping them beside each other, because comparison is the reason to put two samples on one axis and grouping is the arrangement that misreads it. A single series is unaffected either way.

The binning ships behind apexcharts/features/stats, so it costs nothing if you do not use it.

Box plot and violin take the sample too

A box plot required y: [min, q1, median, q3, max] and a violin required a precomputed density profile. Both asked the caller to do the statistics that give the chart its meaning, which is backwards: the numbers you have are the measurements.

Supply the observations and the library computes the rest. They go in points, the field both types already use for jitter dots, so a sample lives in exactly one place whether you summarise it or we do.

series: [{ data: [{ x: 'Phone', points: [1.2, 1.9, 3.4, ...] }] }]

Quartiles interpolate between ranks (R type 7). Whiskers default to the extremes, so nothing is hidden by default; plotOptions.boxPlot.whiskers: 'tukey' switches to the 1.5 × IQR convention.

rowSeries(), so a mark can name the rows it stands for

A histogram bin, a box and a violin all stand for rows that the chart is already holding. chart.rowSeries() returns them as a series, which makes the summary and the observations two views of one dataset:

chart.updateOptions({ chart: { type: 'unit' }, series: chart.rowSeries() })

It returns null when the current type has no row source. The sources ship with the statistics behind apexcharts/features/stats; core keeps only the lookup.

The cross-type morph conserves the ink

The unit pairings used to read as "the old chart vanished and a new one animated", and the reason was structural: the exit was a photocopy of the whole outgoing chart fading over the incoming one. Frame by frame that is a double exposure, two pictures both half-visible, neither becoming the other. No amount of easing fixes a crossfade.

A morph between one mark and N objects now cuts the mark into exactly N cells and flies every cell to its object, corners rounding off and fill blending on the way. A summary mark is cut along its own silhouette rather than its bounding box, and a wedge along its curve, which is why a donut's hole survives being taken apart.

Beyond that, any two mark families now pair. The engine used to decline combinations simply because nobody had driven them; the only pairing still closed is the dot cluster against a partition, where the divider has no cut for a tile or an arc and the result would fall back to a fade. Treemap and sunburst pair at every level rather than only the leaves, and a box plot unfolds into its violin and folds back.

Every offered transition is now covered by a motion test that asserts the marks actually travel, rather than counting the elements that exist at the end.

Nested treemaps

A treemap could only draw two levels, a series and its rows, so anything deeper had to be flattened by hand, throwing away the structure a market map exists to show. A datum may now carry children to whatever depth the data has.

Squarify became recursive: a branch is laid out inside its parent's rect with a header strip and per-level padding, and a container's area is the sum of its children exactly, so a parent always holds what it contains. Flat inputs are untouched and render identically to the float.

The hierarchy resolver is now shared with the sunburst, including the drilldown: '<id>' adapter, which the treemap opts into with nested.drilldownAsLevels.

Drilldown: line and area, and async levels

Drilldown was wired for line and area but inert, and worse than inert: a real click did nothing in every default configuration while the pointer cursor promised otherwise. With markers.size: 0 there is no element to click, and even with markers shown, core marks line and area markers no-pointer-events so the shared tooltip can track the plot. The feature now supplies a markers.discrete entry per drillable point, so only those points carry a dot and it reads as "these open".

Async levels close the phase that makes drilldown usable against an API. The organising idea is that a failed fetch is ordinary, not exceptional, so it must never strand the view: on a throw, a rejection, or a resolver returning something without a data array, the chart stays where it was, the breadcrumb is untouched, nothing is cached, and drillDownError fires. That last case previously no-opped in silence, which is indistinguishable from "the click did nothing". There is also a loading overlay, theme-aware, role="status" with aria-live="polite", whose spinner flattens to a pulse under prefers-reduced-motion.

A layout for the unit chart can now come from outside

Every arrangement the unit chart could draw was hard-coded, so a new one meant a core edit and the set was closed. plotOptions.unit.layout: 'custom' opens it:

plotOptions: { unit: { layout: 'custom', positions: (objects, rect) => [...] } }

positions takes (objects, rect) => [{ id, x, y, r? }], or the name of a layout registered with ApexCharts.registerUnitLayout. A layout is objects in, positions out, and nothing else: it knows nothing about animation because the engine already tweens position, radius and colour and already keeps a mark's identity across a relayout. Marks the provider omits animate out through the existing exit path; ids matching no mark are ignored.

objects carries identity and data per mark rather than just an index, so a provider can address a specific unit rather than a positional slot.

Unit marks travel on a spring

A fixed-duration tween cannot be interrupted: when the next render lands mid-flight it rebuilds the marks at the slot they had not reached yet and re-animates from a standstill. A dragged slider or a scrubbed storyboard interrupts on almost every frame, so that read as a continuous stutter. The gather now runs on a spring, which retargets and keeps its velocity.

A pie slice that moves instead of changing colour

Both state visuals a pie or donut slice had were recolourings: hover lightened the fill, and a click darkened it and redrew it at a 4px larger radius. Neither says "this slice" as plainly as motion does, and the click one was quietly dishonest, since growing the radius inflates the quantity the slice encodes. A click now slides the slice out along its own mid-angle, and hover traces an outline band. Legend clicks toggle the slice in and out through the same path.

Also new here: plotOptions.pie.borderRadius and plotOptions.pie.spacing, for pie, donut and polar area.

🐛 Fixes

An exported SVG carries its fonts and images (#​343)

An exported SVG is a standalone document, and the PNG path rasterizes it through <img src="data:image/svg+xml,...">. An SVG loaded as an image cannot fetch external resources and cannot reach the page's stylesheets or its loaded fonts, so anything the export left as a URL was not merely slow to appear, it was gone. Fonts, images and patterns are now inlined into the download.

A stacked total per group, not per data point

With series[].group each group is its own stack, so a grouped stacked bar should carry one total above each group's bar. It drew one label per data point instead, holding the sum of every series in the chart and centred on the middle of the whole cluster: on two groups of two that meant a single "75" floating between the bars rather than "15" over one and "60" over the other. A 100% stack also now reserves room for the total it otherwise had nowhere to put.

Tooltips and grid chrome measured from the plot origin

Three independent cases where a coordinate was measured from the wrong origin:

• the hover hit-test and bar centres, so the tooltip could caption the neighbouring bar (#​5272). Thanks to @​lazerg (#​5275).
• datetime gridlines that fall outside the plot are now skipped rather than drawn on the axis (#​5273). Thanks to @​lazerg (#​5274).
• an annotation label's background box (#​5270). Thanks to @​mrash (#​5271).

A slice tooltip lands on the slice

tooltip.intersect anchors a pie, donut or polar area tooltip on the arc centroid, which each slice stamps on its path in its own user space. Those were read as if they were SVG-root coordinates, dropping the inner group's translate, and that translate is exactly the offset that centres a pie in a chart wider than it is tall. The caption appeared a couple of hundred pixels to the left of the slice it described. Keyboard navigation had the same arithmetic and the same bug, and now shares one helper with the pointer path.

A chart that changes type behaves like the type it became

Type defaults are applied once, when the chart is first rendered, so updateOptions({ chart: { type } }) left every choice the outgoing type had made for itself in place. A box plot that became a violin kept the five-number tooltip formatter and threw on every hover, which killed the caption and stranded the crosshair on the first category; a bar that became a box plot never acquired that formatter at all and got the plain series tooltip instead of its summary.

The leaves that decide what a chart reads, says, hit-tests or offers as interaction are now re-chosen when the type changes. The ones that decide how it is painted deliberately are not, so changing type does not restyle a chart out from under a morph in flight, and a palette chosen for a bar survives its becoming a line. Anything you set yourself is never re-chosen, including in the same update call.

Others

• a hidden polar area series gives its slot back, and updates animate in place rather than rebuilding
• a --apx-surface token change now updates the background it had itself set, so an OS light/dark flip or a host app swapping its design system is picked up
• a non-array series passed to updateOptions is ignored with a warning instead of poisoning the config and crashing every later update
• a legend toggle no longer re-bins a histogram's counts, which had made the remaining bars change shape
• the drilldown breadcrumb reserves a band above the plot, and only the room it actually lacks
• the walk back to a stacked series' baseline is corrected for line charts
• unit scatter axis chrome follows the configured axis label colour
• xaxis.labels.style.fontSize: 'inherit' no longer yields NaN (#​5064). Thanks to @​waterWang (#​5256).
• a hover arriving after the grid is gone is ignored, and the tooltip arrow parks flush against the marker edge

🔧 Internal

• ApexCharts now depends on apex-commons (^0.5.0) at runtime. The licence manager had been a vendored fork that had drifted from its origin, making the family's licence contract two implementations kept in step by hand; and the crossfilter engine was never chart-specific, so keeping the only copy inside a charting library meant a map, a grid or a tree had to install ApexCharts just to coordinate a filter. Both now come from the shared package, along with the spring primitives the unit chart uses. The browser bundles inline it, so nothing changes for script-tag users.
• the e2e calendar is pinned, so date-based sample snapshots stop rotting by the day
• histogram binning moved out of core, behind apexcharts/features/stats

Full Changelog: apexcharts/apexcharts.js@v6.8.0...v6.9.0

v6.8.0: 💎 Version 6.8.0

Compare Source

A minor release: dataLabels.offsetX / offsetY now accept a function, so a label can be nudged per data point instead of per chart. Everything else is a fix, spanning sparkline layout, brush auto-scaling, CSP-safe SVG export, threshold gradients and CSV export.

One deliberate visual change: area sparklines lose the empty strip under the fill (see below). Every other existing config renders as it did on 6.7.1.

✨ New

Per-data-point dataLabels offsets (#​5107)

dataLabels.offsetX and dataLabels.offsetY now take number | ((opts) => number). The function receives the same { series, seriesIndex, dataPointIndex, w } signature that dataLabels.style.colors already accepts, so labels that collide between two series at the same x can be pushed apart:

dataLabels: {
  offsetY: ({ seriesIndex }) => (seriesIndex === 0 ? -12 : 12),
}

dataLabels is chart-wide config, which is why a plain array keyed by data point index could not solve this: it would apply identically to every series, and the reported overlap is between series. A function also survives updateSeries, where captured indices would otherwise desync. Keep it pure, as it may be called more than once per label.

Resolution now runs through one shared helper across the line/area, bar, treemap and radar paths, which fixed four latent defects on the way:

• line, area and scatter labels all vanished when the offset was non-numeric, because x was computed above the isNaN(x) guard and the guard could never fire
• the slope chart branch read the raw config value instead of the resolved one, yielding a NaN x coordinate
• radar passed its series index as the data point index, so per-point offsets shifted whole series
• bar and rangeBar invoked the user function a second time at draw time for a value they discard

🐛 Fixes

Area sparklines no longer leave a gap under the fill (#​5137)

A sparkline reserved stroke.width / 2 of grid padding at the top and bottom unconditionally. An area sparkline's fill runs to the baseline, so that bottom inset showed as a strip of empty space under the fill: 2px at the default 4px area stroke.

The inset now reserves only what the ink cannot absorb itself. Where the stroke traces the data points (line, area, scatter, unstacked), the distance from the extreme datum to the axis extreme already swallows part or all of the overhang, so only the remainder is reserved. Fills reserve nothing since they are drawn unstroked, and stroke.show: false reserves nothing at all. Anything that strokes to the baseline or fills the plot (bar, heatmap, candlestick, stacked) keeps the full reservation, as does every non-axis sparkline. Room is measured against the smallest plot the insets could leave, so the estimate errs toward over-reserving and can never clip.

Two defects found while measuring this are fixed alongside it:

• Dimensions.gridPad aliased config.grid.padding, so layout insets were written back into the user's own config object, accumulated across renders, and were then read by Core.resizeNonAxisCharts as though the user had asked for them. The resolved padding is now a copy, published as w.layout.gridPad.
• the sparkline marker padding gate tested markers.size > 0, which is false for an array ([0,6] > 0 is NaN > 0), so array-sized markers got no padding and were clipped by 6.5px. It now gates on globals.markers.largestSize, covering both markers.size and markers.discrete.

autoScaleYaxis no longer drops a boundary point on a brush selection (#​5251)

A brush selection reconstructs its x range from the selection rect's DOM bounds, so the pixel to timestamp round-trip can land xaxis.max a sub-pixel fraction below the timestamp of the boundary data point. The y-extrema window trimmed on a strict compare, so that point was excluded from the scale while its marker and the line segment leading to it were still painted, and the line escaped or clipped at the top of the grid. Reaching the same window by panning scaled correctly, which is what made it look arbitrary.

The trim window is now widened by one rendered pixel, expressed in data units from the current x-domain-to-pixel ratio rather than a fixed timestamp epsilon. Both edges are covered, since a sub-pixel overshoot on xaxis.min drops the leftmost point the same way. This also covers a programmatic zoomX() with fractional bounds, and the xaxis.min / xaxis.max reported to your selection event are unchanged.

SVG export is CSP-safe (#​5146)

getSvgString() and the SVG download no longer inject a <style> element, so exports work under a strict Content Security Policy. Styles are inlined onto the elements instead.

The bulk of the work was keeping export fidelity while dropping that tag. The legend stylesheet was injected into a descendant of the exported wrapper, so it was cloned and serialized anyway and still tripped CSP. Transient overlays were hidden only at the first match per selector, so a chart with several (one yaxis tooltip per y-axis, an extra element for point annotations) rendered the leftovers visibly, since their opacity: 0 came from the stylesheet the export no longer carries. Inline styles set by modules are no longer clobbered, which preserves legend.fontSize (the legend box is measured at that size, so a hardcoded 14px overflowed) and the heatmap gradient legend's deliberate overrides. Rules that the inlined subset had dropped are restored: flex-wrap and flex-direction for side and grouped-horizontal legends, alignment, legend-group display, marker positioning, the !important on hidden zero and null series, and the flip transforms used by rounded stacked bars. With injectStyleSheet: false, which is what a strict-CSP app sets, side legends had been exporting as a single horizontal row and bottom legends had stopped wrapping.

Thanks to @​waterWang for the fix (#​5257).

Threshold gradients align with the threshold (#​5209)

plotOptions.line.colors.threshold gradients are now positioned over the axis range. Null values in an area chart with threshold colors are handled correctly, and three further problems in the same area are fixed:

• the offset was derived from the data range while being mapped over the axis range, so the color transition drifted off the threshold whenever the axis extended past the data, via an explicit yaxis.min / max, a nice scale, or a shared axis
• the anchoring was gated on a chart-global null-values flag, which re-anchored every vertical gradient in the chart, including plain gradient fills with no threshold configured. It is now keyed off the threshold feature itself.
• chart.type: 'line', the primary consumer of plotOptions.line.colors, had the identical split-segment defect and was excluded by a type gate

Reversed axes now mirror both the boundary and the stop order, and stops are emitted in ascending order rather than relying on the SVG rule that clamps an out-of-order offset.

Thanks to @​waterWang for the fix (#​5261).

CSV export honours columnDelimiter on unequal-x rows

The unequal-x branch of exportToCSV pushed an array onto rows rather than a delimiter-joined string, so Array.prototype.toString stringified it with a hardcoded comma. Every data row separated the category from its first value with , while the header and remaining values used the configured delimiter, producing output no parser could read:

category;series 1;series 2
0,0;
1,1;1

The default , hid it entirely, which is why it went unnoticed.

Thanks to @​Jaybhade for the fix (#​5253).

🔧 Internal

• resolveDataLabelOffset lives in modules/helpers/DataLabelOffset.js rather than the shared DataLabels module, so the split per-chart bundles inline it and core.js is untouched
• dependency bumps: undici 7.29.0 (#​5250), ip-address 10.4.0 (#​5249)

Full Changelog: apexcharts/apexcharts.js@v6.7.1...v6.8.0

v6.7.1: 💎 Version 6.7.1

Compare Source

A patch release on top of 6.7.0: three interaction and layout fixes, most importantly a point-selection regression that broke slice clicks on pie and donut charts, plus a new vertical orientation for the unit chart's beeswarm layout. Every existing config renders unchanged.

🐛 Fixes

Clicking a pie or donut slice no longer throws (#​5268)

pathMouseDown was bound to the chart instance instead of the Graphics instance that owns _togglePointSelection, so a slice click threw this._togglePointSelection is not a function and selection never toggled. The same mis-binding applied to the mouseenter, mouseleave, mousedown and touchstart listeners on markers, which affected line, area and scatter charts using dataPointSelection. Anything routing through a point click was affected, including drilldown: the "Donut with Drilldown" demo could not be drilled at all on 6.7.0.

Thanks to @​andrewbusch7 for the fix (#​5252) and to @​kne1 for the report.

Semicircle pie, donut and sunburst hug their bottom legend

The fit-to-content branch in Core.resizeNonAxisCharts read its angular span from radialBar's angles regardless of the active chart type, so a pie, donut or sunburst always reported a full 360 and skipped the branch. A semicircle therefore reserved the whole circle's square and left a dead band between the arc and a bottom legend. The span now comes from the active type's own start and end angles, sunburst is included in the selector, and a bottom legend is re-anchored inside the shrunken wrap. Full circles are unaffected.

Sunburst click-to-zoom is interruptible

Clicking a second wedge while the previous zoom was still tweening started a competing animation on the same arcs, and the first zoom's late callback clobbered the second's result, leaving the chart frozen half-zoomed. Superseded frames now stop writing, and an interrupting zoom resumes from each arc's live geometry.

✨ New

Vertical beeswarm orientation for the unit chart

plotOptions.unit.scatter.orientation accepts 'horizontal' (the default) or 'vertical'. Vertical puts the value on the Y axis with category lanes as columns, and the swarm packer now packs along either axis.

plotOptions: {
  unit: {
    scatter: { orientation: 'vertical' },
  },
}

The value-axis domain now always contains every datum in both orientations: an explicit xMin / xMax frames the axis and is extended by whole tick steps when data would fall outside it, so a dot is never drawn past the axis where it cannot be hovered.

A new beeswarm sample gallery ships alongside it: body mass by species (vertical), salary by department (horizontal, one CVD-validated hue per team), and a game-scores bubble beeswarm.

v6.7.0: 💎 Version 6.7.0

Compare Source

The headline is a new chart type, sunburst: a hierarchical radial chart (a nested pie and donut) that draws tree-structured data as concentric rings, one ring per level of the hierarchy, with each child arc nested inside its parent's angular span. This release also brings rounded corners and inter-slice spacing to pie and donut slices, a parliament (hemicycle) layout for the unit chart, an optional hover tooltip on point annotations, and a broad reliability and security pass. Two behavior changes are worth reading before you upgrade: a legend click on pie, donut, and polarArea now toggles the slice in and out, and the premium features now require an entitled plan rather than just any valid key. Every existing config renders unchanged.

✨ New

The sunburst chart type

chart.type: 'sunburst' renders a hierarchy as a ring of nested arcs: the first level fills a donut around the centre hole, and each deeper level stacks outward, with every child arc constrained to the angle of its parent. It is a non-axis chart (dispatched like pie or treemap) and is tree-shakeable via import 'apexcharts/sunburst', so it adds nothing to the core bundle unless you use it. It is a free chart type, not gated.

Data is the familiar x / y shape with a children array for nesting:

new ApexCharts(el, {
  chart: { type: 'sunburst' },
  series: [{
    data: [
      { x: 'Mobile', y: 55, children: [
        { x: 'iOS', y: 30, children: [
          { x: 'iOS 17', y: 18 },
          { x: 'iOS 16', y: 9 },
        ]},
        { x: 'Android', y: 23 },
      ]},
      { x: 'Desktop', y: 33, children: [
        { x: 'Windows', y: 20 },
        { x: 'macOS', y: 10 },
      ]},
    ],
  }],
  plotOptions: {
    sunburst: { innerSize: '25%', borderRadius: 5, spacing: 1 },
  },
})

plotOptions.sunburst.innerSize sets the centre hole (percentage or pixels), borderRadius rounds the arc corners, and spacing opens a gap between neighbouring arcs. Colours, stroke, legend, and title behave as they do on pie and donut.

Rounded corners and spacing for pie and donut

plotOptions.pie.borderRadius rounds the corners of each slice, and plotOptions.pie.spacing opens a gap between slices, so a pie or donut can read as a set of separated, soft-cornered segments rather than a solid wheel. Both apply to polarArea as well.

A parliament layout for the unit chart

The unit chart (introduced in 6.6.0) gains a plotOptions.unit.arc layout: a parliament or hemicycle that arranges the marks as seats in concentric arced rows across an annulus, filled in category order. It is the natural shape for seat counts and any part-to-whole where a semicircle reads better than a grid. The gather animation is now tunable too, with configurable easing and enter motion.

Optional tooltips on point annotations

Point annotations can now show a hover tooltip, so an annotated marker can carry its own explanatory text without a separate custom element.

🐛 Fixes

• A series missing its data no longer breaks the rest of the chart. A series object without a data property used to abort parsing of every series after it, leaving the parsed data out of step with the series names. It is now treated as an empty series, and the remaining series parse and stay aligned.
• updateSeries and updateOptions no longer hang on a failed render. Their promises now reject when the render throws, instead of never settling, so await chart.updateSeries(...) can be caught rather than leaking a pending promise.
• Combo charts label the right series. Goal lines and data labels on a mixed chart now use the real series index rather than the compacted subset index, so labels and goals no longer attach to the wrong series when some series are hidden.
• Server-side rendering no longer crashes on image fills, and an out-of-range annotation yAxisIndex and a sunburst drilldown cycle are fixed.
• Callbacks are safe after destroy(). Animation, resize, and pending timeout callbacks are guarded against firing on a destroyed chart, and the detached SVG root is released on teardown, closing a class of update-then-destroy errors and leaks.
• CSV export guards against formula injection. Field values that begin with a formula character are neutralised so an exported CSV cannot execute when opened in a spreadsheet.
• Fewer surprises from bad numbers. NaN and Infinity guards were added across polarArea, custom series, axis labels, tooltips, and gradients, so a stray non-finite value degrades gracefully instead of throwing.
• Assorted interaction and lifecycle fixes, including a stuck zoom shift-latch and a duplicate mousewheel binding, a keyboard-navigation listener leak on updateOptions, annotation tooltips that could suppress the series tooltip chart-wide, an empty-candlestick crash, a redundant redraw on a resize that did not change the drawing box, and a per-render reset of the hasNullValues and invalidLogScale flags.

TypeScript

plotOptions.sunburst, plotOptions.pie.borderRadius / spacing, and the unit arc layout options are fully typed, and chart.type accepts 'sunburst'.

Compatibility

• Legend click on pie, donut, and polarArea now toggles the slice in and out (it previously darkened and expanded the slice). If your app relied on the old click behavior, review this.
• Premium features now require an entitled plan, not just any valid key. The premium modules (the unit chart type plus storyboard, link, ink, measure, contextMenu, perspectives, and history) clear the watermark only on a premium or enterprise plan. A valid pro key, or the free tier, keeps them in trial mode with the watermark and logs a one-time upgrade notice; it is not treated as an invalid key. Existing pro-plan customers using these features will now see the watermark. Everything else, every free chart type and module, is never gated.
• No breaking API changes, and no renamed or removed options.

v6.6.1

Compare Source

v6.6.0: 💎 Version 6.6.0

Compare Source

The headline is a new premium chart type, unit: one mark per unit of value, drawn as dot clusters, pictograms, waffles, or beeswarms, with a keyed tween that re-forms the marks whenever the data, grouping, or filter changes. It ships with six layouts, per-mark data, and a waffle alias, and it is the first premium chart type (it renders in trial mode with a watermark until a key is set). This release also adds signature verification to the license manager and fixes a zoom-out edge case. Existing configs render unchanged.

✨ New

The unit chart type (premium)

chart.type: 'unit' renders a discrete mark for every unit of value instead of a single bar or slice, so "37 of 200" reads as a countable quantity. It is a non-axis chart (dispatched like pie or treemap) and is tree-shakeable via import 'apexcharts/unit'. On every update each mark tweens from its old position to its new one, so re-grouping, filtering, or a changing count re-forms the marks rather than redrawing from scratch.

new ApexCharts(el, {
  chart: { type: 'unit' },
  series: [276, 266, 3],
  labels: ['For', 'Against', 'Abstain'],
  plotOptions: { unit: { layout: 'grouped' } },
})

Six layouts via plotOptions.unit.layout:

• grouped (default): one phyllotaxis blob per category, laid out in a row.
• packed: one shared blob, coloured by group and sorted so the minority nests in the centre.
• columns: each category is a vertical bar built from stacked dots (a waffle column).
• grid: one waffle lattice, a part-to-whole square "pie" (grid.total rounds it to a fixed cell budget, e.g. 100 for a percentage waffle).
• grid with split: true: small multiples, one mini-waffle per category over a faint track, in a trellis.
• scatter: marks on real value axes, as a 1D beeswarm (laned by category, deterministic anti-overlap packing), a 2D value-value plot (scatter.y: 'value'), or area-scaled bubbles (scatter.sizeRange). The layout draws its own axes with a homegrown nice-number scale.

Also included:

• Shapes: circle, square, and image (isotype pictogram, with image.tint to recolour a monochrome icon to its category colour).
• Per-mark data: alongside flat counts, an object form series: [{ name, data: [{ value, x, z, name, fillColor, id }, ...] }] gives each mark its own colour, position, size, and tooltip content.
• Transitions (transition): group (default, per-category), flow (the anonymous crowd migrates and recolours across a regroup, the circles-to-bars effect), and identity (a specific mark persists across any regroup or relayout, keyed by id / name).
• Sizing: numeric or auto dot size, opt-in sizeByValue bubbles, unitValue waffle scaling (1 mark = N units), and a maxUnits safety cap.
• Labels and chrome: per-cluster clusterLabels (a curved arc over a blob or a straight label above / below a bar, position: 'top' | 'bottom'), per-mark tooltips, legend click to hide and show a category with an animated re-flow, and the standard fill.opacity so overlapping bubbles read through each other.

Nine interactive demos ship under samples/*/unit and samples/*/waffle: a workforce dot cluster, a population age-slider, a pictogram population, a team roster, a life-expectancy beeswarm, a cost-of-living bubble scatter, a scrollytelling marathon storyboard, a startup-funding walkthrough, an electricity-mix waffle, and an urbanisation small-multiple waffle.

The waffle chart type

chart.type: 'waffle' is a thin alias of unit: it presets the grid layout with square cells, so a part-to-whole waffle is one line of config. With grid.total: 100 the values are largest-remainder rounded to exactly 100 cells, so the grid always reads as percentages. The original type is preserved on chart.requestedType, and an explicit layout or shape still wins.

new ApexCharts(el, {
  chart: { type: 'waffle' },
  series: [35, 23, 15, 9, 8, 6, 4],
  labels: ['Coal', 'Gas', 'Hydro', 'Nuclear', 'Wind', 'Solar', 'Other'],
  plotOptions: { unit: { grid: { columns: 10, total: 100 } } },
})

🐛 Fixes

• Zoom-out never stalls on the last category. While zooming out, the high edge is now rounded up instead of down, so the visible span grows by at least one whole category per step rather than appearing stuck at the edge.

TypeScript

plotOptions.unit is fully typed across all layouts and their option groups (grid, scatter, clusterLabels, sizeByValue, image, columns, tooltip), and chart.type accepts 'unit' and 'waffle', with chart.requestedType carrying the original alias.

Compatibility

• No breaking API changes, and no renamed or removed options.
• unit (and its waffle alias) is the first premium chart type: it renders fully in trial mode with an APEXCHARTS watermark until a key is set. Every other chart type stays free and is never watermarked.
• The unit chart is opt-in and additive; charts of every other type render unchanged.
• New unit regression tests (packing determinism, layout geometry, keyed transitions, scatter axes and bubbles, waffle cell allocation, legend toggle, and premium gating) run alongside the existing interaction and end-to-end suites.

v6.5.0: 💎 Version 6.5.0

Compare Source

A release built around interaction polish and one new capability. Mouse-wheel zoom is now smooth and cursor-anchored, the brush/selection now lines up exactly with the bars underneath it, and a run of interaction fixes clears up crossfilter, heatmap updates, and group tooltips. It also introduces optional license enforcement for the premium features: they keep working without a key (trial mode), just with a watermark. No chart types are gated, and existing configs render unchanged.

✨ New

Licensing for the premium features (trial mode)

Seven premium modules now run under a lightweight, offline license check: storyboard, link (crossfilter / linked views), ink, measure, contextMenu, perspectives, and history. Without a valid key they still work fully in trial mode, but the chart shows an unobtrusive APEXCHARTS watermark; a valid key removes it. Everything else, every chart type and every free module, is never gated and stays silent.

ApexCharts.setLicense('APEX-...') // or per-chart via chart.license

A few things worth knowing:

• In use, not bundled. Importing a premium module without actually enabling it does not watermark; only using it does.
• Live. A late setLicense(validKey) followed by an update clears an on-screen watermark; no full re-render needed.
• One key across the family. The key format is shared with the rest of the ApexCharts family (apexgantt, apextree, apexsankey, and friends), validated offline with no network call. SSR-safe.

⚡ Improvements

Continuous, cursor-anchored mouse-wheel zoom

Wheel and trackpad zoom used to run a fixed step at most once every 400ms and drop everything in between, which read as lag. It is now coalesced per animation frame and anchored to the cursor: the data point under the pointer stays put while the window scales around it, so a trackpad's stream of small deltas feels continuous. The zoomed event fires once per gesture, not once per wheel tick.

🐛 Fixes

• The brush/selection now matches the bars underneath it. On numeric and datetime bar charts, brushed ranges drifted from the columns they visibly covered (the first column lit up too early, the last could never be fully selected). Each gesture had been computing its own pixel-to-data conversion, so fixing one path quietly desynced another. There is now a single source-of-truth mapping shared by bar placement and every selection gesture (new drag, dragging the rect, resize handles, and a preselected chart.selection.xaxis), so the reported range always equals the rectangle you see. Range-binned crossfilter histograms now span their outer bin edges too, so every bin, including both edges, is fully brushable, and a chart.link.bins: { width } option is no longer silently dropped.
• Heatmap y-axis labels survive a data-only update. Name-based (series-name) heatmap y-axis labels no longer flip to numeric ticks after the first fast-path updateSeries.
• Crossfilter charts stay rendered when a wrapper pushes an empty series. A React/Vue wrapper syncing its placeholder series prop right after mount no longer blanks a filter-mode chart; the engine re-asserts its aggregated series.
• Group tooltip no longer skips the hovered chart, and horizontal-bar data labels honor offsetX.

TypeScript

chart.license is typed on the chart options.

Compatibility

• No breaking API changes, and no renamed or removed options.
• All chart types and free modules are never gated. The seven premium features run in trial mode with a watermark until a key is set; this is the only behavior change, and it does not block any functionality.
• Bar/column layout is unchanged: the selection fix routes bar placement through the same math it already used, so rendered positions are identical.
• New regression tests cover the license gating (per-feature on/off, in-use vs bundled, late key, SSR no-op), the selection/brush geometry consistency across all four gestures, and the crossfilter bin edges, alongside the existing unit, interaction, and end-to-end suites.

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.

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 ch

✂ Note

PR body was truncated to here.