Skip to content

How to use Animations

Judd2000 edited this page Apr 3, 2024 · 14 revisions

Guide For using Animations in Charts

Usage

Animations have been implemented for bar, line and area charts. These animations include animation from zero on initialization and rendering, as well as transitions outlining changes in the data property that are similar enough to what the previous data was before, as well as opacity animations.

Animations are declared on a chart-by-chart basis with the animations prop. Animations are enabled by default.

animations prop


Transitional Animations

In order for transitions between data to be animated, the two datasets must be fully equal in terms of their dimension scale (this is usually the x-axis, but can be explicitly defined as a chart prop). If they aren't similar enough, animation happens from zero.


Animation

DataTransition


Chart Opacity

Opacity animations are implemented by default. If hover properties are defined, initially hovering over a section of the graph will cause the others' opacity to fade out. Hovering over sections within the graph will not cause the animation to retrigger, but moving outside of the hover area and back in will reanimate opacity. This is also enabled for legend configurations with hover enabled.


LegendHover

OpacityHover

TrendlineLegendAndHover

Limitations

Currently, the highlight and tooltip are disabled while transitional animations are finishing. There is a small limitation in that if you are already hovering over a point when the animation is completing, you must move to another point and then back for the highlighted data to appear. Here is an example:

DisabledTooltipAndHighlight