Ignite UI Theming Across Apex Products: One Import per Product

Between November 8 and 9, 2026 every Apex product shipped an opt-in Ignite UI add-on: ApexCharts 8.8, ApexGrid 4.0.0 (with Enterprise 0.9.0), ApexMaps 1.3.0, ApexTree 2.3.0, ApexSankey 1.14.0, ApexGantt 3.21.0 and ApexStock 0.6.0, all on apex-commons 0.10.0, plus the framework wrappers and six Blazor packages. Check one change before upgrading ApexTree, ApexSankey or ApexGantt: an option you pass now beats the product's own CSS variable.

Key takeaways

• An option you pass wins over the product's CSS variable in ApexTree, ApexSankey and ApexGantt.
• One order in every product: option, product CSS, --apx-* tokens, named theme, Ignite UI, defaults.
• One import per product turns on Ignite UI theming, with no extra licence key.
• designSystem: false turns Ignite UI off for one component; tokens: false ignores the --apx-* tokens too.
• refreshTokens() repaints ApexCharts, ApexTree and ApexSankey after a stylesheet swap.
• One theme registry, now shared with ApexStock presets (details).

Which behaviours changed?

Change	Release	What you will see	How to reverse it
Option beats the product's CSS variable	Tree 2.3.0, Sankey 1.14.0, Gantt 3.21.0	A colour, size or font you pass wins over --apex-tree-*, --apex-sankey-* or --apex-gantt-*	Leave the option out so the variable applies
Passed means passed	Tree 2.3.0, Sankey 1.14.0, Gantt 3.21.0	An option set to its own default value still outranks the variables and tokens	Leave the option out
Explicit colours beat tokens	ApexCharts 8.8.0	A colour you pass wins over --apx-* tokens and a named theme, even at its default	Remove it; details in ApexCharts 8.8
Ignite UI needs the add-on	ApexGrid 4.0.0	An Ignite UI theme no longer reaches the grid by itself	import 'apex-grid/ignite-ui'
Family tokens reach maps	ApexMaps 1.3.0	--apx-series-N sets the ordinal palette and --apx-font-family the font	theme: { tokens: false }
Sankey follows family series colours	ApexSankey 1.14.0	Nodes and chord arcs take --apx-series-N and a registered theme's series	tokens: false, or pass nodePalette
Stock presets join the shared registry	ApexStock 0.6.0	ApexStock.registerTheme() can replace another product's theme of the same name	Give each theme its own name
Tree colours follow the theme	Blazor-ApexTree 11.1.0	Unset colour options take the page theme or the core palette, not fixed hex	Set BorderColor, EdgeColor, EdgeColorHover and TooltipBorderColor to #BCBCBC, BorderColorHover to #5C6BC0, FontColor to #000000

ApexGantt's other changes are in ApexGantt 3.20 to 3.22.

In what order does each product pick a colour?

Highest first, in every product:

1. An option you pass.
2. The product's own CSS variables (--apex-tree-*, --apex-sankey-*, --apex-gantt-*, --apexstock-*, --apexmaps-*, --ag-*).
3. The family --apx-* tokens.
4. A registered or named theme or palette.
5. Ignite UI's --ig-* tokens, with the add-on loaded.
6. The built-in defaults.

Step 4 is one shared registry: ApexCharts.registerTheme, ApexStock.registerTheme and registerTheme from apex-commons all write to it, and every product except ApexGrid reads it (a Gantt names an entry with theme: 'brand', new in 3.21.0). One theme across Apex products has the per-product detail.

How do I turn on Ignite UI theming?

Import the add-on of every product on the page, before the first render:

Product	Add-on	Since	Guide
ApexCharts	apexcharts/features/ignite-ui	8.8.0	Using with Ignite UI
ApexGrid	apex-grid/ignite-ui	4.0.0	Using with Ignite UI
ApexMaps	apexmaps/ignite-ui	1.3.0	Using with Ignite UI
ApexTree	apextree/ignite-ui	2.3.0	Using with Ignite UI
ApexSankey	apexsankey/ignite-ui	1.14.0	Using with Ignite UI
ApexGantt	apexgantt/ignite-ui	3.21.0	Using with Ignite UI
ApexStock	apexstock/ignite-ui	0.6.0	Using with Ignite UI

import 'apexcharts/features/ignite-ui'
import 'apex-grid/ignite-ui'
import 'apexgantt/ignite-ui'

The ApexStock add-on also needs ApexCharts 8.8.0 or later, and ApexGrid Enterprise 0.9.0 popups follow the grid's add-on. Without its add-on, a product ignores --ig-* silently.

To turn Ignite UI off for one component, pass designSystem: false; tokens: false also stops it reading the --apx-* tokens. On ApexCharts, ApexMaps and ApexStock both switches sit under theme; on a grid they are design-system="off" and tokens="off".

Each Blazor package bundles its add-on, so there is nothing to import. Turn it on once in Program.cs:

builder.Services.AddApexCharts(options => options.IgniteUI = true);
builder.Services.AddApexGantt(options => options.IgniteUI = true);
builder.Services.AddApexMaps(options => options.IgniteUI = true);

ApexGridIgniteUI.Enable();
ApexTreeIgniteUI.Enable();
ApexSankeyIgniteUI.Enable();

Each package has DesignSystem and Tokens switches (on the chart's Theme, as <ApexGrid> parameters, on the other packages' options). See Blazor charts and the ApexGrid Blazor section.

What do I call after a theme switch?

Products read the theme when they render, and swapping a stylesheet renders nothing. ApexTree 2.3.0 and ApexSankey 1.14.0 now have refreshTokens(), as ApexCharts already does. It re-reads every theme source and repaints, keeping a tree's or Sankey's nodes in place:

link.addEventListener('load', () => {
  chart.refreshTokens()
  tree.refreshTokens()
  sankey.refreshTokens()
}, { once: true })
link.href = '/themes/material-dark.css'

react-apextree and vue-apextree 2.2.0, ngx-apextree 1.3.0, react-apexsankey and ngx-apexsankey 1.1.0, and vue-apexsankey 1.2.0 expose it on the ref or component. ApexGantt and ApexStock re-render with update({}), ApexMaps with updateOptions({}), and ApexGrid follows the change live. Blazor has RefreshTokensAsync() on the chart and the Sankey, and RefreshTokens() on the tree.

Upgrading

npm install apexcharts@8.8.1 apex-grid@4.0.0 apexmaps@1.3.0 apextree@2.3.0 apexsankey@1.14.0 apexgantt@3.22.0 apexstock@0.6.0

• In ApexTree, ApexSankey and ApexGantt, drop options that should defer to a CSS variable.
• On ApexGrid, add import 'apex-grid/ignite-ui' (Blazor: ApexGridIgniteUI.Enable()) if the grid followed an Ignite UI theme in 3.x. ApexGrid 4.0.0 has its other breaking changes.
• On Blazor, update the six packages to the versions in the FAQ; Blazor-ApexCharts 7.1 and 8.0 has the chart's C# changes.
• Call refreshTokens() wherever you swap a theme stylesheet at runtime.
• Use ApexCharts 8.8.1 for percentage heights.
• Gzipped, apex-commons (apex-commons.es.min.js) grows about 4.8 KB, apexcharts.min.js 4.9 KB and apexmaps.min.js 5.3 KB; the ApexCharts add-on is 3.7 KB.

Frequently asked questions