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.

First render only

The entrance animation plays only on the first render. Subsequent re-renders (for example, calling render() again with updated data, or graph.render({ keepOldPosition: true })) redraw without replaying the entrance animation.

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

// updating later does not replay the entrance animation
graph.render({ keepOldPosition: true })

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>