ApexCharts 8.8 and 8.8.1: Ignite UI Theming, Font and Radius Tokens, Modern CSS Colors

ApexCharts 8.8.0 shipped on November 8, 2026, and 8.8.1 followed the same day. 8.8.0 lets charts follow an Ignite UI theme and changes how a color you pass ranks against the design tokens; 8.8.1 fixes a height regression from 8.7.0, so install 8.8.1.

Key takeaways

• Ignite UI theming is one opt-in import, with no extra licence key.
• Two new tokens, --apx-font-family and --apx-radius-factor, plus tokens.font on a registered theme.
• A color or font you pass beats the tokens, even when it equals the default.
• Modern CSS colors paint correctly, including oklch(), color-mix(), color(display-p3 ...) and a var() set on the chart's container.
• 8.8.1 stops a '100%' height chart growing inside a parent sized by its content.
• Upgrading is npm install apexcharts@8.8.1.

Which behaviours changed?

Change	Release	What you will see	How to reverse it
Explicit colors beat tokens	8.8.0	A chart.foreColor, grid.borderColor, or axis axisBorder.color or axisTicks.color you pass wins over --apx-fore, --apx-grid and a named theme's tokens, even at its default value	Remove the option so the token applies
Token font	8.8.0	--apx-font-family or a named theme's tokens.font sets the chart font; the context menu, the ink card and the trellis headers, legend and title follow it (the menus used Helvetica)	Pass chart.fontFamily for the chart text, or theme.tokens: false to ignore the tokens
Bundle size	8.8.0	apexcharts.min.js is about 4.9 KB gzipped larger: the token layers moved onto apex-commons 0.10.0, plus the color fixes	None
Percentage height	8.8.1	A '100%' chart in a content-sized parent keeps its height, as in 8.6.0	None: the growth was a bug

How do I make charts follow an Ignite UI theme?

Import the add-on once, next to ApexCharts:

import ApexCharts from 'apexcharts'
import 'apexcharts/features/ignite-ui'

Charts then take their series colors, text, gridlines, tooltips and menus, font, and light or dark mode from the Ignite UI theme on the page. It ranks below everything you set, so a chart you already themed keeps its look, and theme.designSystem: false turns it off for one chart. After swapping the theme stylesheet, call chart.refreshTokens().

The add-on is 3.7 KB gzipped and is not in the default or the full bundle. Details are in Using with Ignite UI; Ignite UI theming across Apex products covers the other libraries.

What do the new tokens do?

.dashboard {
  --apx-font-family: 'Inter', system-ui, sans-serif;
  --apx-radius-factor: 0.5;
}

--apx-font-family sets the chart font wherever you did not pass chart.fontFamily, and a theme registered with ApexCharts.registerTheme() can carry one as tokens.font. A web font named this way is read again once it has loaded: one extra render, and none when the font is already in place.

--apx-radius-factor scales the fixed corner radii of the chart's own chrome, such as tooltips, menus, the toolbar and breadcrumbs. 1 changes nothing and 0 squares the corners; radii you set in options are not scaled. See Read colors from CSS design tokens and One theme across Apex products.

Which CSS colors can I pass now?

Up to 8.7, some valid colors drew grey bars, pies and strokes, black gradient stops and grey heatmap and treemap cells, while the legend showed the real color. 8.8.0 paints them:

colors: [
  'oklch(62% 0.19 255)',
  'color-mix(in srgb, #00b8d9 70%, white)',
  'rgb(37 99 235 / 0.8)',
  'var(--brand-accent)',
]

That covers space, decimal and percent rgb(), rgb(r g b / a), color(srgb ...), color-mix(in srgb ...) and rgb(from ...), and shades of oklch() and color(display-p3 ...), whether you pass them in colors, through --apx-series-N and --apx-accent, or inside a var(). A var() set on the chart's container or a shadow host now shades from its own value, not from black. Hex, comma rgb(), hsl() and named colors render as before. See Colors.

Why install 8.8.1 rather than 8.8.0?

In 8.7.0 and 8.8.0, a chart with chart.height: '100%' inside a parent sized by its content, such as a card holding a heading and the chart, grew taller on every redraw without end. 8.8.1 keeps its height, as 8.6.0 did, and the chart still follows a parent that has a height of its own. If you are on 8.7.0, go straight to 8.8.1. See chart.height.

Other fixes

• Point and y annotations on horizontal bar and rangeBar rows sit on the row's centre (#5078, thanks @itisrmk).
• Custom legend markers stay fully opaque when markers.fillOpacity is 0 (#4711, thanks @itisrmk).
• tooltip.y.formatter receives its context in range, dumbbell and streamgraph tooltips (#4951, thanks @itisrmk).
• A selected donut slice keeps its name and value in the centre label (#4013, thanks @itisrmk).
• A hidden y axis leaves no gap (#5004, thanks @nk-batman21).
• A chart.foreColor equal to the other mode's default, such as #373d3f on a dark chart, is kept.
• A named dark theme, or theme.follow: 'os' on a dark system, paints the dark background and tooltip on the first render.
• ApexCharts.exec(id, 'refreshTokens') calls refreshTokens(); it returned null.

The full lists are in the 8.8.0 and 8.8.1 GitHub releases.

Upgrading

npm install apexcharts@8.8.1

The script tags are on jsDelivr. Add the second line only if you want Ignite UI theming:

<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.8.1/dist/apexcharts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.8.1/dist/features/ignite-ui.js"></script>

After upgrading, check:

• A chart.foreColor, chart.fontFamily, grid color or axis color in your options or window.Apex that you expected a token to override: remove it.
• Snapshot tests of exported SVGs: modern colors now export as color-mix() and color() strings.

Earlier in the 8.x line: 8.6 and 8.7, 8.5, and 8.3 and 8.4.

Frequently asked questions