ApexCharts 8.5: Gauge Targets, Hover Without a Tooltip, and Full Dash Patterns

ApexCharts 8.5.0 shipped on October 24, 2026, from a batch of 29 issues and five contributor pull requests. Check the table below if you use 100% stacked area or line charts, trellis, or horizontal bars with many rows.

Key takeaways

• Gauges and radial bars take target marks, from a free add-on.
• tooltip.visible: false keeps every hover event and draws no box.
• Every dash option takes a full pattern, such as '8 3 2 3', and annotation lines take a line cap.
• 100% stacked area and line charts draw percentages, as 100% bars already did.
• Overlapping data labels can be hidden evenly across series with hideOrder: 'balanced'.
• Legend and keyboard announcements are translated in every shipped locale.
• Upgrading is npm install apexcharts@8.5.0.

Which behaviours changed?

Change	What you will see	How to reverse it
stackType: '100%' applies to area and line	A 0 to 100 axis instead of raw totals	stackType: 'normal'
Horizontal bars thin overlapping category names	Short rows lose their names; the top name stays	xaxis.labels.hideOverlappingLabels: false
Trellis panels drop the empty title band	Panel plots are a few pixels taller	grid.padding.top
dataLabels.avoidOverlap.maxShift: 0 means never move	Labels stay on their marks	Leave maxShift unset
A plugin's dashArray can be a string or nested array	Code that assumed a number breaks	Handle patterns (see Plugins)
Screen-reader text follows the locale	Legend items and zoom announcements read in the chart's language	Override chart.locales[].options.a11y

How do I mark a target on a gauge?

plotOptions.radialBar.targets draws a mark at a value on any ring: a goal, a limit, last month's reading. Marks are lines, triangles or circles, can carry a label, and move with the chart when the data updates. value: 'series' follows the reading itself, as a pointer on the rim.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/radial-targets'

new ApexCharts(el, {
  chart: { type: 'radialBar', height: 320 },
  series: [72, 54],
  labels: ['Sales', 'Support'],
  plotOptions: {
    radialBar: {
      targets: [
        { value: 85, seriesIndex: 0, label: { text: 'Goal' } },
        { value: 60, seriesIndex: 1, shape: 'triangle' }
      ]
    }
  }
}).render()

The add-on is free and adds about 1.6 KB gzipped to the default bundle. On a script-tag page, load dist/features/radial-targets.js after apexcharts.min.js; the full bundle already has it. See targets.

To draw your own marks on a dial, chart.getRadialScales() returns its centre, ring radii and a point(value, radius) helper. Plugins read the same object as api.radialScales.

Gauge bands also gained two gap units that look the same at every size: bandsStyle.gap: '1.5deg' is an angle and '1%' a share of the scale.

Can I keep hover events without the tooltip?

Yes. Apps that show hover details in their own panel used to choose between the tooltip and the events. With tooltip.visible: false the chart still resolves the point under the pointer, chart.events.mouseMove and click report its seriesIndex and dataPointIndex, and keyboard navigation still announces it, but no tooltip box is drawn. tooltip.enabled: false still turns hover off entirely. See tooltip.visible.

What can a dash pattern be now?

Every dash option, from stroke.dashArray to grid lines, markers, crosshairs and annotations, accepts a number, a pattern string or an array of lengths:

stroke: { dashArray: [0, '8 3 2 3'] }  // first series solid, second dash-dot
annotations: {
  yaxis: [{ y: 80, strokeDashArray: '0 6', strokeLineCap: 'round' }] // round dots
}

On stroke.dashArray a top-level array is still one value per series, so write a pattern shared by every series as a string. See stroke.dashArray.

How are colliding data labels hidden?

avoidOverlap.hide drops the later-drawn label of a colliding pair, so two series that collide at every point left the second with no labels. hideOrder: 'balanced' spreads the drops across series instead. On a line or area chart, add maxShift: 0 to keep each label beside its own value:

dataLabels: { avoidOverlap: { maxShift: 0, hide: true, hideOrder: 'balanced' } }

Other fixes

• Points appended to a hidden series are kept (#3200, thanks @lbesecker195).
• Ending a selection drag no longer fires a chart click (#5060, thanks @itisrmk).
• A null row draws no end dots (#4458, thanks @b84330808).
• updateOptions({ trellis: null }) turns a trellis back into one chart (thanks @lazerg).
• Two updateOptions calls in one task no longer lose a trellis grid (thanks @lazerg).
• Marker hover and selection events fire (thanks @lazerg).
• updateSeries that clears the zoom also removes the Reset Zoom button (thanks @lazerg).
• stepSize is used when it divides a fixed min to max window (thanks @Pharex38).
• The zoomed view survives internal updates, and on y for xy zoom (#5389, #5369).
• Radar category names are never rotated.

The full list is in the 8.5.0 GitHub release. The locale translations have not had a native-speaker review yet, so corrections there are welcome.

Upgrading

npm install apexcharts@8.5.0

Or with a script tag:

<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.5.0/dist/apexcharts.min.js"></script>

The default bundle grows by 2,798 bytes gzipped (1.0%). Then check:

• 100% stacked area or line charts: their axis now reads 0 to 100.
• Horizontal bar charts with many short rows: some category names now hide.
• Plugins that read api.info.stroke.dashArray: allow strings and nested arrays.

Earlier in the 8.x line: 8.3 and 8.4, 8.1 and 8.2, and 7.9 and 8.0.

Frequently asked questions