ApexCharts 8.6 and 8.7: Overlapping Markers, Named Palettes and Your Element's Height

ApexCharts 8.6.0 shipped on October 29, 2026 and 8.7.0 on October 31. Neither adds an option. Six of the 8.7 fixes first came up in the Blazor wrapper, and react-apexcharts 2.2.0 shipped alongside with a React 19 fix.

Key takeaways

• ApexCharts leaves your element's min-height alone (8.6). The height it reserves moved to its own .apexcharts-canvas wrapper.
• Marker events and the intersect tooltip see every series at a spot (8.7), through a new coincident list.
• A palette you name is kept in dark and light mode (8.7).
• Unit chart updates take 350 ms and follow dynamicAnimation (8.6).
• CSV export writes each point's own x (8.7).
• react-apexcharts 2.2.0 stops a ref from breaking the chart on React 19.
• Upgrading is npm install apexcharts@8.7.0.

Which behaviours changed?

Change	What you will see	How to reverse it
Host min-height left to you (8.6)	A min-height on your element applies, and survives destroy()	Read the reserved height from .apexcharts-canvas
Unit chart updates at 350 ms (8.6)	Faster regroups, and none with dynamicAnimation.enabled: false	chart.animations.dynamicAnimation.speed: 800
Named palettes kept (8.7)	palette1 in dark mode, or palette4 in light mode, draws as named	Leave theme.palette unset to follow the mode
Intersect tooltip on overlapping markers (8.7)	One row per series drawn at the hovered spot	Draw your own rows with tooltip.custom
CSV export (8.7)	A category axis converted to numeric writes each point's x; a bar chart with Date x writes the epoch	None: the old rows were wrong

Which points sit under a clicked marker?

When two series share a value at the same x, their markers are drawn at one spot and only the top one can be clicked. From 8.7.0 the event names the rest:

chart: {
  events: {
    markerClick(event, chartContext, { seriesIndex, dataPointIndex, coincident }) {
      // seriesIndex and dataPointIndex name the marker drawn on top.
      // coincident lists every visible series' point at that spot, in series order.
      coincident?.forEach((p) => console.log(p.seriesIndex, p.dataPointIndex))
    }
  }
}

dataPointSelection carries the same list, and so does click on the SVG renderer. With chart.renderer: 'canvas' the click lands on the canvas rather than a marker, so use markerClick there. The intersect tooltip now lists every series drawn at the hovered spot (#4778), and tooltip.custom receives the same coincident list. See markerClick and tooltip.custom.

What changed about my element's height?

Up to 8.5, ApexCharts reserved the chart's height on the element you render into, as an inline min-height. That overrode a min-height you set on the element, and destroy() then cleared it. Anything that re-creates a chart in the same element, such as React StrictMode or a Vue or Angular refresh, built the next chart with no minimum: a height: '100%' chart in an unsized parent fell from 360px to 154px.

From 8.6.0 the reservation is a min-height on the chart's own .apexcharts-canvas wrapper, and nothing writes your element's style (react-apexcharts#751). Rendered heights are otherwise unchanged. If your code measured the reserved height on your element, measure .apexcharts-canvas instead. See chart.parentHeightOffset.

Why did my named palette change in dark mode?

Light mode defaults to 'palette1' and dark mode to 'palette4'. Up to 8.6 the library could not tell a palette you named from those defaults, so palette1 in dark mode drew as palette4, and the reverse in light mode, at render and after every updateOptions. 8.7.0 records whether you named a palette: a named one is kept, and an unnamed one still follows the mode through undo, redo and Perspectives, whose captured state now includes theme.paletteExplicit. See theme.palette.

react-apexcharts 2.2.0

React 19 passes ref to a function component as an ordinary prop. The wrapper forwarded its other props to its container <div>, so a ref you passed replaced the one the chart uses, and the chart failed with Element not found (#745, fixed by @dajiaohuang). 2.2.0 ignores ref, types it as never, and declares the components as function components, so code that passes ref or uses ReactApexChart as a type no longer compiles. Reach the instance through chartRef:

const chartRef = useRef<ApexCharts | null>(null)

<Chart type="line" series={series} options={options} chartRef={chartRef} />

chartRef.current?.updateSeries(newSeries)

See Accessing the ApexCharts instance.

Other fixes

• Unit charts resolve var() colours while they tween.
• Gesture timers are cancelled on destroy().
• A chart follows a container that resizes in the frame it first draws, often because the chart brought in the page's scrollbar.
• An x range annotation stays drawn when you zoom inside it on a category axis converted to numeric.
• A line or area series keeps its line when a string x repeats.
• A single series with numeric x values and no axis type gets its default tick count back, a regression since 8.3.0. tickAmount is also kept when an update brings a formatter or categories.
• A line series in a candlestick chart no longer floors the y axis (#5407).
• The 3D funnel connector is shaded for hex alpha and named colours (#4949, thanks @nk-batman21).

The full lists are in the 8.6.0 and 8.7.0 GitHub releases.

Upgrading

npm install apexcharts@8.7.0

Or with a script tag:

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

The default bundle is 277,531 bytes gzipped, 2,889 bytes (1.1%) more than 8.6.0, mostly the coincident marker lookup. Then check:

• Code that read the reserved height from your own element: read .apexcharts-canvas.
• Marker handlers that assumed one series per spot: coincident now names the others.
• Tests that snapshot CSV exports or intersect tooltip rows.
• React code that passes ref to a chart: switch to chartRef.

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

Frequently asked questions