One Key, One Palette, One Engine: ApexTree 2.1, ApexGantt 3.18 and ApexSankey 1.12

ApexTree 2.1.0, ApexGantt 3.18.0 and ApexSankey 1.12.0 shipped on August 12, 2026, bringing one license slot, one palette and one motion engine to the family. No API changed; two behaviours change on their own, listed below.

Key takeaways

• One setLicense call registers the key for every Apex product on the page.
• --apx-* tokens on :root now theme trees, gantt charts and sankey diagrams as well as charts. ApexGrid is not in this layer: it themes through its own --ag-* properties and a theme="dark" attribute.
• destroy() stops the animation loop in ApexTree and ApexSankey; framework wrappers need no change.
• ApexTree follows prefers-reduced-motion without any wiring.
• ApexGantt stops erasing --apex-gantt-* properties it did not set.
• Upgrading is npm install apextree@latest apexgantt@latest apexsankey@latest.

Which defaults changed?

Change	Release	What you will see	How to reverse it
ApexTree honours prefers-reduced-motion	ApexTree 2.1.0	With the OS setting on, the tree skips its animations	No opt-out. Add the .apextree-reduced-motion class to force reduced motion regardless of the OS; a class you set is never removed
ApexGantt clears only the two row-background --apex-gantt-* properties it owns	ApexGantt 3.18.0	An inline --apex-gantt-bar-fill or --apex-gantt-grid-line on the container survives every render	Remove the inline property if you relied on it being cleared

See Reduced motion and Setting --apex-gantt-* on the container.

One key for the page

Each library used to keep a private copy of the license manager, so ApexCharts.setLicense licensed the charts while a tree beside them rendered watermarked. The key now lives in one versioned global slot that all four products share:

import ApexCharts from 'apexcharts'

// licenses the charts, trees, gantt charts and sankey diagrams on this page
ApexCharts.setLicense('your-license-key')

ApexTree.setLicense, ApexGantt.setLicense and ApexSankey.setLicense do the same. Call one, once, before the first instance is constructed. This is one call registering the key everywhere, not one key unlocking more than you bought: entitlements still follow the plan the key was issued for. Once a valid key is registered, a later invalid or expired one cannot replace it.

ApexTree and ApexSankey need a Pro license and ApexGantt a Premium license, whatever your size; the Community License, free under $2M in annual revenue, budget or funding, does not include them. See pricing and the license.

One palette

ApexTree, ApexGantt and ApexSankey now read the --apx-* family tokens that ApexCharts already uses, so a design system declares its colours once for those four products:

:root {
  --apx-accent: #4f46e5;   /* primary accent */
  --apx-fore: #1f2937;     /* text and labels */
  --apx-grid: #e5e7eb;     /* gridlines, borders and separators */
  --apx-surface: #ffffff;  /* background surface */
  --apx-series-1: #4f46e5; /* ordered palette for multi-series visuals */
  --apx-series-2: #06b6d4;
}

On ApexSankey 1.12.2, two of those tokens do not reach the diagram: with --apx-surface and --apx-series-* set on :root, the background stayed transparent and the node fills kept their defaults.

The tokens are resolved when a visual draws. ApexCharts 7.8.0 also re-reads them live, so an OS light/dark flip reaches a chart with no re-render. A sankey writes its SVG fills as attributes at render time, so it picks a token change up on its next render: call update() after one. The tokens resolve below anything you set explicitly, so a chart already themed through its options or its --apex-<product>-* variables is untouched. The full resolution order is in Family root tokens, with matching sections for ApexGantt and ApexSankey. The CSS Theming demo shows the per-product variables the tokens sit beneath.

ApexGrid sits outside this layer: apex-grid 3.5.0 contains no --apx-* property at all, so a grid on the same page needs its own --ag-* properties mirrored by hand. Its theme="dark" attribute redefines 25 of them. Mirroring the surface colours by hand gets you part of the way, and a few properties ride along free because they are mixed from others (--ag-row-hover is mixed from --ag-surface), but muted text is a flat value in both modes, so it sits at the light rgb(107, 114, 128) until --ag-text-muted is set directly. Dark mode here is an attribute rather than a JS property.

destroy() stops the animation loop

react-apextree, vue-apextree and ngx-apextree call tree.destroy() on unmount. Before 2.1.0 that left the spring loop running, so a tree destroyed mid-collapse kept writing to detached elements until its springs settled:

// unchanged code: from ApexTree 2.1.0 this tears everything down
useEffect(() => {
  const tree = new ApexTree(el.current, options)
  tree.render(data)
  return () => tree.destroy()
}, [])

destroy() now also detaches the keyboard navigator, the semantic-zoom gesture listeners and the pending level-of-detail debounce. ApexSankey 1.12.0 fixes the same leak: a diagram destroyed mid-morph no longer leaves its relayout driver ticking. The wrappers need no change; upgrade the library. The ApexTree motion docs cover what animates and when.

Other fixes

• All three products now run the spring driver shared with ApexCharts.
• ApexTree's enter/exit reveal and ApexSankey's morph no longer snap through their last few percent in a single frame.

Upgrading

npm install apextree@latest apexgantt@latest apexsankey@latest

No API changed, so there is nothing to migrate. Check the two behaviour changes against your app.

Frequently asked questions