chart.animations

Configuration Structure

chart: {
  enabled: boolean,
  speed: number,
  animateGradually: { ... },
    enabled: boolean,
    delay: number,
  dynamicAnimation: { ... },
    enabled: boolean,
    speed: number,
  chartTypeMorph: { ... },
    enabled: boolean,
    speed: number,
  respectReducedMotion: boolean,
  largeDatasetThreshold: number,
}

The animations options control how the chart animates on first render and when data updates. You can turn animations on or off, tune their speed, animate series points one by one, animate dynamic data changes, morph between chart types, and honour the user's reduced-motion preference. It is part of the chart configuration.

animations

enabled

Enable or disable all the animations that happen initially or during data update.

speed

Speed at which animation runs.

animateGradually

enabled

Gradually animate one by one every data in the series instead of animating all at once.

delay

Speed at which gradual (one by one) animation runs.

dynamicAnimation

enabled

Animate the chart when data is changed and chart is re-rendered.

speed

Speed at which dynamic animation runs whenever data changes.

chartTypeMorph

Tween between chart types instead of the destroy-and-recreate flicker when updateOptions changes chart.type. Requires the optional apexcharts/features/morph feature to be imported. Without it these settings have no effect:

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

Supported pairs include bar ↔ pie / donut / radialBar / polarArea / funnel / pyramid / gauge, plus the trivial pie ↔ donut ↔ polarArea cases. Falls back to an instant snap when the source/target types or data shapes are incompatible.

enabled

Enable the cross-type morph animation. Has no effect unless the apexcharts/features/morph feature is registered.

speed

Duration of the morph tween in milliseconds.

respectReducedMotion

When true (default), the chart honors the OS-level prefers-reduced-motion media query: all initial-mount animations are skipped and the chart renders instantly for users who have requested reduced motion. Set to false to override (e.g. for QA / demo screens that need to always animate).