ApexCharts 7.9 and 8.0: A Smaller Default Bundle, and the Highlight Filter

ApexCharts 7.9.0, 7.9.1 and 8.0.0 all shipped on October 9. 8.0 needs one import or script tag for each of seven chart types and features that left the default bundle; the table below lists that and every 7.9 behaviour change, with how to reverse each.

Key takeaways

• Seven items left the default bundle (8.0): unit, sunburst, violin, drilldown, waterfall, dumbbell and streamgraph. One import brings each back.
• The default bundle is 263,188 B gzipped, 9.8% less than 7.9.1.
• apexcharts.full.min.js (8.0) has every chart type and feature in one file.
• The console names a missing add-on or an unknown chart type (7.9 and 8.0).
• The highlight filter (7.9) draws a filtered part solid in front of its faded whole.
• The unversioned jsDelivr URL serves 8.0 now. Pin apexcharts@7 to stay on 7.

Which defaults changed?

Change	Release	What you will see	How to reverse it
Unit (with waffle and beeswarm), sunburst, violin, drilldown, waterfall, dumbbell and streamgraph left the default bundle	8.0.0	A console line naming the import, and nothing drawn in that chart's place. Without drilldown the chart draws but does not drill.	Add the import or script tag, load apexcharts.full.min.js, or pin apexcharts@7
Raincloud by script tag needs the violin renderer	8.0.0	No raincloud; the console logs an error naming dist/violin.js	Load dist/violin.js before dist/features/raincloud.js
Script-tag perspectives shows the trial watermark	7.9.1	Without a Premium key or above, ApexCharts.perspectives.decode() and fromURL() on a page that loads dist/features/perspectives.js show the trial watermark, as a bundled app always did	Set a Premium key or above
An unknown chart.type throws	7.9.0	new ApexCharts() and updateOptions() throw and name the closest real type	Fix the type name
Unknown options and bad axis bounds warn	7.9.0	A console.warn for a top-level key nothing reads, or an axis bound that cannot be parsed (not printed by apexcharts.min.js)	Correct or remove the option
Box plots animate updates	7.9.0	Boxes morph from their previous shape on updateSeries()	Set dynamicAnimation: { enabled: false } in chart.animations
Needle gauge reading moved	7.9.0	The value label sits below the needle's reach at either end of the dial, so the two never cross	Set dataLabels.value.offsetY in plotOptions.radialBar
Series names typed as a string or a number	7.9.0	A TypeScript error where code treats getState().seriesNames, getState().labels or a series' name as a string	Convert with String(value)

What moved out of the default bundle in 8.0?

8.0 moves the unit (with waffle and beeswarm), sunburst and violin chart types, and the drilldown, waterfall, dumbbell and streamgraph features, out of the default bundle. Most pages draw none of them and need no change. A page that draws one adds a line for each, and the item registers itself:

// 7.9: this line alone had all seven built in
import ApexCharts from 'apexcharts'

// 8.0: add one line for each moved item the page draws
import 'apexcharts/sunburst'           // also apexcharts/unit, apexcharts/violin
import 'apexcharts/features/waterfall' // also drilldown, dumbbell, streamgraph

With script tags, add dist/unit.js, dist/sunburst.js, dist/violin.js or dist/features/<name>.js; from 8.0 the tag may come before or after the ApexCharts one. Next to the default bundle, import apexcharts/features/waterfall, not apexcharts/waterfall: that entry is for the lean core and ships a second copy of the bar renderer.

The 8.0 migration guide has every file name, the raincloud and lean-core cases, and server rendering.

What does the console tell you now?

Each of the three releases makes a mistake easier to find:

• 7.9.0: an unknown chart.type throws from new ApexCharts() or updateOptions() and names the closest real type, instead of failing later inside render(). The ES module build and apexcharts.js also warn about an unknown option or an unreadable axis bound. Numeric strings such as yaxis.min: '10' now work.
• 7.9.1: apexcharts.min.js now warns when a chart asks for a feature the page has not loaded, such as trellis or measure; a script-tag page used to get no message at all. A chart type that is not registered logs an error instead of leaving an empty chart.
• 8.0.0: an updateOptions() that switches to an opt-in type the page never loaded (unit, sunburst, violin or icicle) keeps the chart that was there.

ApexCharts: chart type "sunburst" is not registered. Bundler: import
'apexcharts/sunburst' (or import ApexCharts from 'apexcharts/full'). Script
tag: add <script src=".../dist/sunburst.js"> after the ApexCharts script, or
load apexcharts.full.min.js instead, which has every type. This type is not
in the default apexcharts.min.js.

When something is missing shows the feature warning too.

What does the highlight filter draw?

When a dashboard filters to one product, region or channel, the usual approach redraws each chart with only the filtered values, and the totals disappear. The highlight filter, new in 7.9.0, keeps both: each value is drawn faded at its full size, and the part the pick accounts for is drawn solid in front of it, from the same baseline. The part is data you pass next to the whole, so picking and clearing are ordinary updates that animate.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/highlight-filter'

// Each series carries the part next to its whole
const series = [
  { name: 'Americas', data: [34, 43, 66, 69], highlightData: [26, 29, 50, 48] },
  { name: 'Europe', data: [21, 26, 29, 32], highlightData: [14, 17, 21, 20] },
]

It works on bar, column, funnel, line, area, pie, donut, polar area, radial bar and treemap charts, and it is a Premium feature. See the highlight filter docs and pricing.

More in the highlight filter demos, including a dashboard filtered by a click on another chart.

Other fixes

• Legend toggles, updates and resizes animate without jumps (7.9.0).
• Treemap click-to-zoom and its breadcrumb animate as a camera move (7.9.0).
• Tooltips stay on the hovered mark on sparklines, heatmaps and horizontal bars (7.9.0).
• The canvas renderer shows tooltips for box plots, candlesticks and markers (7.9.0).
• An option set to undefined or null no longer crashes the chart (7.9.0).
• Bar and column data labels stay visible while updateSeries() animates them (7.9.0, #5332).
• An explicit palette passed with theme.mode to updateOptions() is kept (7.9.0, #5041).
• Y-axes mapped by seriesName no longer throw when there are fewer axes than series (7.9.0, #3836).
• A drilldown keeps its state when a level is refused (8.0.0).
• apexcharts/core, ssr, client and full resolve their types under node10 module resolution (8.0.0).

The full lists, with the new Basque (eu) locale, are in the 7.9.0, 7.9.1 and 8.0.0 GitHub releases.

Upgrading

npm install apexcharts@8.0.0

• Find the charts that draw one of the seven moved items and add each import, or switch to import ApexCharts from 'apexcharts/full'.
• For a raincloud, import apexcharts/raincloud, not apexcharts/features/raincloud, which has no violin renderer to draw through in 8.0. With script tags, load dist/violin.js before dist/features/raincloud.js.
• On a script-tag page with the unversioned URL, add the add-on tags now (the files exist in 7.9.1 too), or pin apexcharts@7.
• A RequireJS or AMD page that needs an add-on loads apexcharts.full.min.js, because add-ons cannot register there.
• ng-apexcharts accepts 8.x from 3.2.0, so upgrade it alongside. The React and Vue wrappers already accept 8.x; for server rendering with vue3-apexcharts, use 1.11.2 or later, since earlier versions render with a bundled copy of ApexCharts 5.

Coming from 7.6 or earlier, read the 7.7 and 7.8 notes too; from 6.x, start with the 7.0 migration guide. The tree-shaking guide lists every entry point and what each one costs.

Frequently asked questions