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 or transitions to target specific update scenarios.

#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>

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

#Transitions

transitions configures state-change animation timing for hover, show/hide, and container resize events. The prop shape is accepted; triggers are not yet wired.

<ChartSvg
    :transitions="{
        active: { animation: { duration: 200 } },
        show: { animation: { duration: 750 } },
        hide: { animation: { duration: 750 } },
        resize: { animation: { duration: 0 } }
    }"
>
    ...
</ChartSvg>

Hover colors are configured on <ChartHover> or per-series hoverColor. transitions.active controls only the timing of the transition, not the target color.

#API

#animation (Chart root)

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

#animations[key] (Chart root and dataset)

#transitions

#Easing Registry

#Easing Presets

#Related Docs

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