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.

Conserving the Ink

A morph between one mark and many objects, a bar becoming the dots it was counting, does not crossfade. Frame by frame a crossfade is a double exposure: two pictures both half-visible, neither becoming the other, which is why easing never made it read as one shape turning into another.

Instead the mark is cut into exactly as many cells as there are objects, and every cell flies to its own object, corners rounding off and fill blending on the way. A summary mark is cut along its own silhouette rather than its bounding box, and a wedge along its curve, which is how a donut's hole survives being taken apart.

This is what rowSeries() is for: it hands back the rows a mark stands for, so switching type opens the summary into its own observations rather than swapping in an unrelated chart.

chart.updateOptions({
  chart: { type: 'unit' },
  series: chart.rowSeries()
})

Any two mark families pair. The engine used to decline combinations simply because nobody had exercised them. The only pairing still closed is a dot cluster against a partition, where a divider has no cut for a tile or an arc and the result would fall back to a fade. Treemap and sunburst pair at every level rather than only the leaves, and a box plot unfolds into its violin and folds back.