What's New in ApexCharts 6.8

ApexCharts 6.8.0 adds one new capability, per-data-point dataLabels offsets, and a round of fixes. Nothing was removed; the only visible change is that area sparklines lose the empty strip under the fill, so check the table below if you render them.

Key takeaways

• New: dataLabels.offsetX and offsetY accept a function, resolved per data point.
• Visual change: area sparklines fill to the bottom edge, without the 2px strip.
• CSP: SVG export no longer injects a <style> element.
• Your grid.padding is left alone: layout insets are no longer written back into it.
• Fixes for autoScaleYaxis on a brush selection, threshold gradients and CSV columnDelimiter.
• Upgrading is npm install apexcharts@6.8.0.

Which defaults changed?

Change	Release	What you will see	How to reverse or upgrade
Area sparklines reserve only the stroke overhang the fill cannot absorb	6.8.0	No empty strip under the fill (2px at the default 4px stroke)	grid: { padding: { bottom: 2 } } puts the strip back. Remove any padding you added to hide it
Layout insets kept out of config.grid.padding	6.8.0	grid.padding holds only the values you set and no longer grows across renders	Read the resolved padding from w.layout.gridPad

Per-data-point dataLabels offsets

dataLabels.offsetX and dataLabels.offsetY now take number | ((opts) => number). The function receives the same { series, seriesIndex, dataPointIndex, w } argument as dataLabels.style.colors, so two series whose labels collide at the same x can be pushed apart (#5107).

// before: one offset for every label, so nudging one series moved the other
dataLabels: {
  offsetY: -12,
}

// after: resolved per point, so the two series separate
dataLabels: {
  offsetY: ({ seriesIndex }) => (seriesIndex === 0 ? -12 : 12),
}

It is a function rather than an array because dataLabels is chart-wide, so an array would apply identically to every series. Keep it pure, as it may be called more than once per label. Line, area, bar, treemap and radar charts all resolve it. See dataLabels.offsetY for the full signature.

Why do area sparklines fill to the bottom edge now?

A sparkline used to reserve stroke.width / 2 of padding at the top and bottom whatever its shape. An area sparkline's fill runs to the baseline, so the bottom inset showed as an empty strip (#5137). The inset now covers only the stroke overhang the ink cannot absorb, and errs toward over-reserving, so nothing clips. Bar, heatmap, candlestick and stacked sparklines keep the full reservation. See the sparkline demos, and grid.padding for the reversal.

SVG export works under a strict CSP

getSvgString() and the SVG download no longer inject a <style> element; styles are inlined onto the exported elements instead (#5146). Side legends, legend font size, marker positioning and rounded stacked bars export as they render, including with injectStyleSheet: false, which a strict-CSP app sets. Thanks to @waterWang.

const chart = new ApexCharts(el, { chart: { injectStyleSheet: false }, series, xaxis })
await chart.render()
const svg = await chart.getSvgString()

See Export SVG and chart.injectStyleSheet.

Other fixes

• autoScaleYaxis keeps the boundary point in the y scale on a brush selection or a fractional zoomX() (#5251).
• plotOptions.line.colors.threshold gradients sit on the threshold when the axis extends past the data, in line charts as well as area, and nulls in area charts are handled (#5209). Thanks to @waterWang.
• exportToCSV uses your columnDelimiter on every column of unequal-x rows, not a comma after the category (#5253). Thanks to @Jaybhade.
• Sparklines with array-sized markers.size get marker padding instead of being clipped by 6.5px.
• Line, area and scatter labels no longer vanish with a non-numeric offset, and radar applies per-point offsets per point rather than per series.

The full list is in the 6.8.0 GitHub release, and every change in the 6.7.1 to 6.8.0 diff.

Upgrading

npm install apexcharts@6.8.0

Or pin your CDN link to 6.8.0. The React, Vue and Angular wrappers work unchanged.

1. If you render area sparklines, remove any padding you added to hide the strip under the fill.
2. If your code read computed insets from config.grid.padding, read w.layout.gridPad instead.

ApexCharts is available under the Community License, free for organisations under $2M in annual revenue, budget or funding; Premium features need a paid licence. See pricing.

Frequently asked questions