Sunburst chart with initial animations
Type
demo This demo shows how modifying Sunburst chart’s and its series’ hidden states can result in nice initial fan-out animation.
Animating map lines with CSS
Type
tutorial Each line in a MapChart is an SVG object in document’s DOM tree. This means we can use CSS to target and modify it, including using CSS animations. This tutorial will show how we can make MapLine animate itself from the start. Prerequisites We’re going to assume that you know what MapLine is, how to […]
Disabling SankeyDiagram initial animation
Type
tutorial This supershort tutorial will show how to disable SankeyDiagram’s initial “fold-out” animation. Disabling animation If you have “animated” theme enabled, SankeyDiagram will fold out its nodes from left to right when it first loads. For that specific animation, it uses its interpolationDuration setting. So, to make the nodes appear instantly, all we have to do […]
Trigger a replay of the chart initial animations
Type
demo Most of the elements on a chart – e.g. series or chart itself – have appear() method. Calling it will re-play whatever animation was played when the chart was first loaded, for example series morphing into place. This demo showcases this functionality.
Animated rotation of the globe via API
Type
demo This demo shows how we can animate rotation of a globe (MapChart with an Orthographic projection) by creating an animation for its deltaLongitude and deltaLatitude properties.
Animated bullets
Type
demo In this demo you’ll see how we can use chart’s built-in animation capabilities to add animation effects to bullets. Example #1 Example #2
Disabling XY series initial animations
Type
tutorial By default, when “animated” theme is enabled, all XY series will show initial animation, growing from zero to their absolute values. This tutorial will show how you can disable that effect, without interfering with the rest of the animations. Disabling Disabling this initial effect is easy: each series has a setting showOnInit. The “animated” theme […]
Creating Pie Series Animations
Type
tutorial By default (if you are using “animated” theme), Pie series will fade in when chart initializes. Let’s explore how we can fancy-up those animations. Base chart Let’s take this chart as a base: As you can see, it just fades in. Boooooring. Let’s fix that. The concepts But, before we jump to unicorns and rainbows, […]
Custom Loading Indicator
Type
tutorial This tutorial will show how you can create your own custom loading indicator over chart. The task Supposedly we have a complex chart, with loads of data, which needs to be loaded from server, parsed, digested and visualized. We don’t want the empty space of a chart just sit there, so we’d like to display […]