chart.animations

Configuration Structure

chart: {
  enabled: boolean,
  speed: number,
  easing: ApexEasing,
  animateGradually: { ... },
    enabled: boolean,
    delay: number,
  dynamicAnimation: { ... },
    enabled: boolean,
    speed: number,
    easing: ApexEasing,
  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.

easing

Cadence: the easing curve for the generic tweens. Accepts a named curve, a cubic-bezier array, or a function:

const options = {
  chart: { animations: { easing: 'easeOutBack' } }, // named curve
}
// or a cubic-bezier: easing: [0.34, 1.56, 0.64, 1]
// or a function:     easing: (t) => t * t

The default (easeInOutSine) is unchanged, so existing charts animate exactly as before. Register your own named curve with ApexCharts.registerEasing('bounce', (t) => /* ... */). Note: the tuned per-type initial-draw easings (pen-stroke, grow, pop) are intentionally fixed and are not affected by this value.

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.

easing

Easing for data-change morphs only (same accepted forms as animations.easing). When unset it inherits the chart-wide easing, except detected streaming scrolls (appendData, or a shifted fixed-length window under xaxis.range) which default to 'linear' so the window slides at constant velocity.

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).

largeDatasetThreshold

Point count above which the coordinated variable-length data transition is skipped in favor of a single GPU-composited opacity fade, keeping updates cheap on large series. Set to 0 to never skip.