Animation

ApexSankey plays an entrance animation the first time a diagram renders. The animation is configurable and automatically disabled for users who prefer reduced motion.

Animation options

Option	Type	Default	Description
animation.enabled	boolean	true	Whether the entrance animation plays
animation.duration	number	800	Total animation duration in milliseconds

const sankey = new ApexSankey(document.getElementById('chart'), {
  animation: {
    enabled: true,
    duration: 800,
  },
})
sankey.render(data)

Adjusting the duration

Increase the duration for a slower, more deliberate reveal, or decrease it for a snappier entrance:

const sankey = new ApexSankey(el, {
  animation: { enabled: true, duration: 1200 },
})

Disabling animation

Set enabled: false for an instant render with no entrance animation — useful for dashboards where charts should appear immediately, or when embedding in a print/export context:

const sankey = new ApexSankey(el, {
  animation: { enabled: false },
})

Reduced motion

The entrance animation is automatically disabled when the user's system has prefers-reduced-motion set, regardless of the animation.enabled value. You do not need to handle this yourself — it respects the OS-level accessibility preference by default.

The entrance is first render only

The entrance animation plays only on the first render. Re-rendering (calling render() again, or graph.render({ keepOldPosition: true })) redraws without replaying it.

const graph = sankey.render(data)   // animates

// re-rendering does not replay the entrance animation
graph.render({ keepOldPosition: true })

Animating a data change

The entrance animation is not the only motion available. update(data) transitions a live diagram to a new dataset: nodes and ribbons spring to their new places when the topology is unchanged, and morph through it when the topology differs.

sankey.render({ nodes, edges: edges2024, options: sankey.options })

// animates into the new data instead of redrawing
sankey.update({ nodes, edges: edges2025, options: sankey.options })

update() obeys the same animation.enabled flag and the same reduced-motion preference, falling back to an instant redraw. See Data Updates and Morphing.

Continuous motion

particleFlow animates particles drifting along each ribbon, with density proportional to the flow's value. It is independent of the entrance animation and keeps running across updates:

const sankey = new ApexSankey(el, { particleFlow: true })

Being purely decorative, it is skipped entirely under reduced motion. See Particle Flow.

React example

import { ApexSankey } from 'react-apexsankey'

const options = {
  animation: {
    enabled: true,
    duration: 1000,
  },
}

export default function AnimatedSankey() {
  return <ApexSankey data={data} options={options} />
}

Vue example

<template>
  <ApexSankey :data="data" :options="options" />
</template>

<script setup lang="ts">
import ApexSankey from 'vue-apexsankey'

const options = {
  animation: { enabled: true, duration: 1000 },
}
</script>