What's New in ApexSankey 1.11

ApexSankey 1.11.0 shipped on 10 August 2026 with animated updates, chord and alluvial projections, new layouts, themes and a plugin API. It is fully additive and non-breaking, so nothing needs action unless your code called the internal renderEdge method.

Key takeaways

• Animated updates: update(data) springs or morphs to new data instead of redrawing.
• One model, three projections: the layered Sankey, alluvial via buildAlluvialData, and chord via type: 'chord' (Chord Diagrams).
• Layout: orientation: 'vertical', and cyclic flows drawn as dashed back-edges.
• Theming: five built-in themes, registerTheme for brand presets, and nodePalette.
• Extensibility: a plugin API on a typed event bus, three built-in plugins, and ApexSankey.compare().
• No breaking changes. Upgrading is npm install apexsankey@latest.

How does an animated update work?

Call update() on a rendered instance. When the topology is unchanged, nodes and ribbons spring to their new places. When it differs, the diagram morphs: entering flows unfurl out of their source node, survivors slide, and removed flows retract and dissolve. At rest the result is identical to render(), and it redraws instantly when animation.enabled is false or the user prefers reduced motion.

const sankey = new ApexSankey(el, options)
sankey.render({ nodes, edges: edges2024, options: sankey.options })

// later, on the same instance
sankey.update({ nodes, edges: edges2025, options: sankey.options })

The diff keys on node id and on the (source, target, type) triple for flows, so keep ids stable. The rendered event fires after each update() settles.

The year switch below calls update() on a live instance; coal leaves and nuclear arrives, so it takes the morph path. The other switches recreate the instance, because projection, orientation and theme are construction-time options.

Details in Data Updates and Morphing.

Three projections, one model

The same { nodes, edges } now renders three ways, so choosing a projection is a config change. The layered Sankey stays the default. type: 'chord' draws nodes as arcs on a ring with ribbons across the interior, for dense many-to-many relationships; arcCornerRadius (default 6) rounds the outer corners of each arc. An alluvial diagram starts from a table of subjects and their category at each dimension, which buildAlluvialData converts into nodes and edges:

const data = ApexSankey.buildAlluvialData({
  dimensions: ['2019', '2022'],
  records: [
    { values: { '2019': 'Free', '2022': 'Pro' } },
    { values: { '2019': 'Pro',  '2022': 'Team' } },
  ],
})
const sankey = new ApexSankey(el, { axisTitles: ['2019', '2022'] })
sankey.render({ ...data, options: sankey.options })

Theming, tooltips, interaction, events and animated updates apply to every projection. Try the alluvial demo and see Alluvial Diagrams.

Plugins and the event bus

on and off subscribe to a typed event bus: node:click, node:mouseenter and node:mouseleave, the edge: equivalents, plus rendered and destroyed. use(plugin) installs a plugin, and any teardown it returns runs on destroy().

const off = sankey.on('node:click', ({ id }) => showDetail(id))

sankey.use({
  name: 'click-logger',
  install: ({ on }) => on('node:click', ({ id }) => console.log(id)),
})

Three plugins ship built in, as named exports and on ApexSankey.plugins.*: pathTrace pulses along the flows connected to a picked node, timePlayback plays through ordered frames with a play/pause control and scrubber, and drillDown collapses groups of nodes into super-nodes that expand on interaction. Its pure transform, ApexSankey.collapseGroups(data, groups, collapsed), seeds a first render that is already collapsed.

See the plugins demo and Plugins and Events.

Other changes

• Vertical orientation: orientation: 'vertical' puts ranks in rows. See Orientation and Circular Links.
• Circular links: a cycle is detected from the topology and drawn as a dashed back-edge, with no option needed.
• Themes: light, dark, midnight, mint and sunset; options you set still win. See Themes.
• Click to focus: clicking a node or flow pins its upstream and downstream path and dims the rest (cycle-guarded).
• Draggable nodes: draggableNodes with mouse, touch and pen; a position holds until the next render() or update().
• Particle flow: particleFlow animates particles along each ribbon, and is skipped under reduced motion. See Particle Flow.
• Comparison split-view: ApexSankey.compare() shows two states side by side with a structural diff. See Comparison Split-view.

The full list is in the 1.11.0 GitHub release.

Upgrading

npm install apexsankey@latest

Or bump the version on your CDN link. Every 1.10.0 option and call still works; only the internal renderEdge method left the surface. Browse all ApexSankey demos.

ApexSankey needs a Pro licence or higher at any size: it is not part of the Community License, which is free under $2M in annual revenue, budget or funding. See pricing. From 1.10.0, keys issued from 27 July 2026 carry an ECDSA P-256 signature, and unsigned older keys keep working until 31 July 2027; see Setting the License.

Frequently asked questions