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.

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.

See the live morphing demo →