Charts - Animation

#Usage

import { ChartBar, ChartCanvas, ChartHover, ChartLine, ChartSvg } from '@primeui/vue-chart';

<ChartSvg :animation="{ duration: 750, easing: 'easeOutCubic' }">
    <!-- series and axes -->
</ChartSvg>

Animations are on by default; no configuration is required for standard entrance and update transitions. Pass an animation prop to the chart root to override duration or easing. Use animations for per-property control.

#Basic

Animations are enabled by default. Charts animate on first render and on data updates with no configuration. The default is easeOutQuart over 1000ms. To customize, pass an animation prop on <ChartSvg> or <ChartCanvas>.

#Duration

Set animation.duration to control the animation length in milliseconds. The default is 1000ms.

<ChartSvg :animation="{ duration: 400 }">...</ChartSvg>

#Easing

Set animation.easing to a preset name or a custom function (t: number) => number where t goes from 0 to 1. Use easeOutQuart (default) or easeInOutCubic for data updates. Presets like easeOutBounce and easeOutElastic create spring or bounce effects on entrance.

<ChartSvg :animation="{ duration: 900, easing: 'easeOutBounce' }">...</ChartSvg>

#Entrance and Update Timing

duration, easing, and delay apply to the first render and to later data changes alike. Set animation.update to give data changes their own timing. Fields omitted from update fall back to the base values, so a chart without it keeps one timing for both.

<ChartSvg :animation="{ duration: 1000, update: { duration: 200 } }">...</ChartSvg>

A 1000ms entrance reads well on first paint, but a chart updating on a shorter interval than its duration restarts each tween from wherever the previous one was interrupted, so the rendered value trails the data.

Exits resolve through the update scope as well, since a series or point leaving is the result of a data change.

A container resize does not animate. A resize arrives as a stream of size changes rather than a single one, so animating it leaves the marks trailing a container that is still moving.

update.delay is what keeps a delay scoped to the entrance. Without it, a delay set for the first render also pauses every later update and holds exiting elements in place before they begin to leave.

<ChartSvg :animation="{ delay: 600, update: { delay: 0 } }">...</ChartSvg>

#Disabling Animation

Pass :animation="false" to disable every animation including looping animations entries. Use this when updating the chart at high frequency.

<ChartSvg :animation="false">...</ChartSvg>

#Custom Easing

Register a custom easing function once at app startup using registerEasing, then reference it by name in animation.easing across the app.

import { registerEasing } from '@primeui/vue-chart';

registerEasing('easeOutCustom', (t) => 1 - Math.pow(1 - t, 4));

<ChartSvg :animation="{ easing: 'easeOutCustom' }">...</ChartSvg>

Use getEasing to retrieve a registered function by name, when applying the same curve in canvas animate callbacks inside renderMarker.

#Looping Property Animations

Pass animations (a map of named entries) to continuously interpolate dataset properties (opacity, tension, lineStrokeWidth, lineDashOffset, …). These run independently of the entrance animation. Each entry targets one or more renderer properties via the properties array. Set loop: true to repeat, and alternate: true so the value bounces between from and to instead of snapping back.

<ChartSvg
    :animations="{
        tension: {
            properties: ['tension'],
            from: 1,
            to: 0,
            duration: 2000,
            easing: 'easeInOutCubic',
            loop: true,
            alternate: true
        }
    }"
>
    <ChartLine ... />
</ChartSvg>

#Per-Dataset Overrides

Each dataset component (<ChartBar>, <ChartLine>, …) also accepts its own animations prop. Per-dataset entries are scoped to that series only and override chart-level entries with the same key.

<ChartSvg>
    <ChartBar
        id="sales"
        :data="data"
        :animations="{
            opacity: { properties: ['opacity'], from: 1, to: 0.4, duration: 1400, loop: true, alternate: true }
        }"
    />
    <ChartLine
        id="trend"
        :data="trend"
        :animations="{
            tension: { properties: ['tension'], from: 1, to: 0, duration: 2000, loop: true, alternate: true }
        }"
    />
</ChartSvg>

#Hover and Property Animations

When hover state and a looping animations entry target the same property, hover wins. For example, if opacity is animated to fade between 1.0 and 0.3 while the user hovers a different dataset, the hovered-out series shows the hover-dim value rather than the current property-animation value.

This keeps interactive feedback responsive and predictable regardless of any background property animations.

#Color Transitions

Color changes snap by default. Set animation.colors to true to interpolate them instead, so a new palette, an edited color prop, or a theme switch fades between the old and new color rather than cutting.

<ChartSvg :animation="{ colors: true }">...</ChartSvg>

Color animation uses the same duration, easing, and delay as the rest of the chart's animation.

<ChartSvg :animation="{ colors: true, duration: 600 }">...</ChartSvg>

Heatmap and treemap default to true instead. Their color encodes the value rather than a category, so snapping it would hide a data change. Only the default differs: setting colors to false turns color animation off there as well.

A series with no color set snaps whatever this is set to. Its fill comes from the .p-chart-color-N stylesheet rule on SVG, or from the default palette resolved at paint time on canvas, so no color value exists in JavaScript to interpolate. Setting an explicit color, a color scale, or a per-datum color array makes the series eligible.

Color animation covers every chart type except candlestick, where color encodes direction rather than a quantity, so an interpolated in-between color would show a state the data never had.

#API

#animation (Chart root)

Pass :animation="false" to disable all animations on this chart.

#animations[key] (Chart root and dataset)

#Easing Registry

#Easing Presets

#Related Docs

• Column & Bar
• Line & Area
• Pie & Donut
• Decimation