Transitions, interactions, and tooltips

All charts are also born with basic transitions, animations, and interactive tooltips. For a simple chart, you might not need to change anything; but in case you want more control, you can configure these behaviors with local and global properties.

Transition duration

You can create charts that change the way they look on user interaction. They will automatically transition to the new values gracefully and smoothly. Transition animations are configured with default ease algorithms and durations, but you can change them by editing the properties of the Chart.defaults.global.animation object, or override any defaults locally by using the options.animation object.

For example, in the following chart code, all transitions last five seconds (Pages/BarChart6.html):

new Chart("ocean-volume-bar-chart", {
    type: "bar",
    data: {...},
    options: {
        …
        animation: {
            duration: 5000
        }
    }
});