Animations

ApexCharts provides a smooth experience with the help of SVG.js's built-in animations. Select a chart type and click Update to see the animation in action.

To see all options available in animations, please refer to Animations configuration.

Custom Easing (Cadence)

The animations.easing option accepts a named curve, a cubic-bezier array, or a function, so you can tune how the generic tweens feel without touching anything else:

const options = {
  chart: { animations: { easing: 'easeOutBack' } }, // or [0.34, 1.56, 0.64, 1], or (t) => t * t
}

Register your own named curve with ApexCharts.registerEasing('bounce', (t) => /* ... */). The default (easeInOutSine) is unchanged, so existing charts animate exactly as before, and the tuned initial-draw easings (pen-stroke, grow, pop) stay fixed. A separate data-change override is available via dynamicAnimation.easing; see chart.animations.

Morphing Between Chart Types

When updateOptions changes chart.type, ApexCharts can tween from the old shape to the new one instead of destroying and rebuilding the chart. The morph is an optional, tree-shakeable feature, so it must be imported before it takes effect:

import ApexCharts from 'apexcharts'
import 'apexcharts/features/morph'

Then enable it under chart.animations:

chart: {
  animations: {
    chartTypeMorph: {
      enabled: true,
      speed: 600,
    },
  },
}

Supported transitions include bar ↔ pie / donut / radialBar / polarArea / funnel / pyramid / gauge, plus the trivial pie ↔ donut ↔ polarArea cases. When the source and target types (or their data shapes) are incompatible, the chart falls back to an instant snap.