ApexCharts 7.7 and 7.8: Three Default Changes and a Round of Fixes

ApexCharts 7.7.0 shipped on October 1 and 7.8.0 the day after. Between them they change three defaults, each reversible in one option; everything else is a fix or a speed-up that needs nothing from your code.

Key takeaways

• Overlapping data labels now move apart (7.8). dataLabels.avoidOverlap: false restores the old placement.
• Waterfall labels have no chip (7.8). The ink follows chart.foreColor instead.
• Trellis headers no longer promote on click (7.7). trellis: { promote: true } brings the click back.
• updateOptions now reaches derived series and tooltip options (7.7).
• Hovering a 700-series chart blocks for 170ms instead of 2,537ms with a shared tooltip (7.8).
• Upgrading is npm install apexcharts@7.8.0.

Which defaults changed?

Default change	Release	What you will see	How to reverse it
dataLabels.avoidOverlap is on	7.8.0	Labels that overlapped now sit apart	dataLabels: { avoidOverlap: false }
Waterfall label chip removed	7.8.0	Labels in the theme's text colour, no rectangle	dataLabels.background with the old colours
trellis.promote is false	7.7.0	Clicking a panel header does nothing	trellis: { promote: true }

chart.promotePanel(key) and chart.restorePanels() work whatever promote is set to, so a page that promotes from its own controls needs no change. See Promoting a panel.

Why did my data labels move after upgrading to 7.8?

Because two of them were landing on each other, and dataLabels.avoidOverlap is now on by default. After the labels are drawn, colliding pairs are nudged apart along the value axis. Labels that already clear each other stay put: none of the 320 demo charts that predate the option render differently. Dual-axis combo charts gain the most, because two independently scaled axes can put labels on the same row whatever their values.

// Place every label strictly at its own mark, as 7.7 did
dataLabels: { enabled: true, avoidOverlap: false }

// Keep the nudge, and drop a label that still collides
dataLabels: { enabled: true, avoidOverlap: { hide: true } }

Pie, donut, polar area, radial bar and radar charts keep their own placement. Overlapping data labels covers gap, maxShift and the rest of the behaviour.

What happened to the chip behind waterfall labels?

It is gone by default since 7.8.0. A waterfall now prints each step with no background, in ink that follows chart.foreColor, so a label reads over its bar or beside a small one on either theme.

A bare background: { enabled: true } does not bring back the old look: it draws the standard data-label chip, which is dark on the light theme. Pass the 7.7 colours instead:

dataLabels: {
  background: {
    enabled: true,
    backgroundColor: '#fff',
    foreColor: '#373d3f',
    borderColor: '#e3e8ee',
    opacity: 0.92,
  },
}

The crowded-labels demo shows both 7.8 changes on one chart. The waterfall chart docs explain the defaults.

Why did updateOptions ignore my new series or tooltip theme?

Two bugs, both fixed in 7.7.0:

• Derived series ignored new data. updateOptions({ series }) kept the first dataset on chart types that compute their series from your input: waterfall, histogram, dumbbell, streamgraph, treemap and the zoom-aware downsampler. updateSeries worked; now both do.
• Tooltip options were frozen at creation. A runtime dark-mode toggle left the tooltip white. theme, shared, intersect and x.show now update.

// From 7.7 this darkens the tooltip as well as the axes
await chart.updateOptions({ theme: { mode: 'dark' }, tooltip: { theme: 'dark' } })

Other fixes

• Trellis (7.7): fits its host, keeps stacked and 100% scales correct, and fires panel events through chart.events. New trellis.minPanelHeight (default 80px) stops panels shrinking past legibility.
• Faster hover (7.8) on charts with hundreds of series. Data label backgrounds beyond chart.animations.largeDatasetThreshold (default 1000) now appear without animation.
• The column crosshair is centred on the painted bar when the bar has a stroke.
• A treemap tooltip sits on the tile it describes (#5321).
• Axis labels no longer raise a native browser tooltip unless the text was cut short (#5318).
• The tooltip closes when the pointer leaves the plot sideways.
• dataLabels.style.colors accepts functions in the TypeScript types, matching runtime.
• The AJAX demos load again; the AJAX tutorial uses the new jsDelivr URL.

The full lists are in the 7.7.0 and 7.8.0 GitHub releases.

What changed in the licence text?

7.7.0 keeps the $2M threshold and widens what it measures: a paid licence is needed at $2 million USD or more in annual revenue, operating budget, funding, or equivalent financial resources, counting parent companies and affiliates. See the licence and pricing pages.

Upgrading

npm install apexcharts@7.8.0

Or with a script tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/7.8.0/apexcharts.min.js"></script>

Check the three default changes against your charts. Visual snapshot tests on charts with data labels will show diffs wherever two labels used to overlap. Coming from 7.4 or earlier, read the 7.5 and 7.6 notes too; from 6.x, start with the 7.0 migration guide.

Frequently asked questions