Skip to content

Animation options

In Vizzu you can set the timing and duration of the animation. You can do this either for the whole animation, or for animation groups such as the elements moving along the x-axis or the y-axis, appearing or disappearing or when the coordinate system is changed.

Let’s see first a simple example when a stacked column chart is grouped using the default animation options.

Info - How to setup Vizzu

In HTML, create a placeholder element that will contain the rendered chart.

<html>
 <body>
  <div id="myVizzu">
  </div>
 </body>
</html>

In JavaScript, initialize and configure the chart:

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.15/dist/vizzu.min.js'
import data from 'https://lib.vizzuhq.com/0.15/assets/data/music_data.js'

let chart = new Vizzu('myVizzu')

await chart.initializing

chart.animate({
    data: data,
    config: {
        channels: {
            y: {
                set: ['Popularity', 'Kinds']
            },
            x: {
                set: ['Genres']
            },
            color: {
                set: ['Kinds']
            },
            label: {
                set: ['Popularity']
            },
        },
    }
})

chart.animate({
    config: {
        channels: {
            y: {
                detach: ['Kinds']
            },
            x: {
                attach: ['Kinds']
            }
        }
    }
})

We stack the columns, still with the default options.

chart.animate({
    config: {
        channels: {
            x: {
                detach: ['Kinds']
            },
            y: {
                attach: ['Kinds']
            }
        }
    }
})

Now we change the animation settings for the elements moving along the y-axis and also the change in styles, more specifically when the labels on the markers move from the center of the chart elements to the top of them.

chart.animate({
    config: {
        channels: {
            y: {
                detach: ['Kinds']
            },
            x: {
                attach: ['Kinds']
            }
        }
    }
}, {
    y: {
        duration: 2,
        delay: 2
    },
    style: {
        duration: 2,
        delay: 4
    }
})

This is an example of changing the settings for the whole animation at once.

chart.animate({
    config: {
        channels: {
            x: {
                detach: ['Kinds']
            },
            y: {
                attach: ['Kinds']
            }
        }
    }
}, {
    duration: 1,
    easing: 'linear'
})

When the two settings are combined, Vizzu will use the general animation options and spread the unique settings for specific groups proportionally. This is why you can see the same animation as two steps before but happening much quicker since the duration of the whole animation is set to 1 second.

chart.animate({
    config: {
        channels: {
            x: {
                attach: ['Kinds']
            },
            y: {
                detach: ['Kinds']
            }
        }
    }
}, {
    duration: 1,
    easing: 'linear',
    y: {
        duration: 2,
        delay: 2
    },
    style: {
        duration: 2,
        delay: 4
    }
})

The default unit for animation is seconds, but you can set other units. Besides if you only want to change the duration of the animation, you can use the following, simplified format to do that.

chart.animate({
    config: {
        channels: {
            x: {
                detach: ['Kinds']
            },
            y: {
                attach: ['Kinds']
            }
        }
    }
}, '500ms')