Dataviz logo representing a Interactive chart.

Interactivity is a key feature of any chart displayed on the web. It includes tooltip, hover effect, cross-graph interaction, zooming, panning and more.

Interactivity is a big topic. This section aims at giving general tips and tricks on the topic together with applied examples ready to be used in your project.

Useful links

Work in Progress

This section is a work in progress. 🚧

For now, it just lists all the charts using Interactivity in the gallery.

But I plan to write some complete tutorials on this passionating and complicated topic. You can subscribe to the project to know when it's ready!


GIF of a scatterplot with hover effect

Scatterplot Hover effect

How to add a hover effect to highlight a group on a scatterplot

GIF of a bubble plot smoothly transitioning data

Bubble plot data set transition

How to smoothly animate the transition between dataset

gif of a violin plot smoothly transitioning to a boxplot using shape morphism

Violin to Boxplot transition

Using shape morphism to smoothly transition from a boxplot to a violin and reverse

GIF showing a violin plot with varying bucket size

Bucket size effect

Interactive example showing the bucket size effect on a violin chart

GIF showing a mirror transition between a boxplot and a violin plot

Boxplot to Violin plot

Interactive example showing the difference between a boxplot and a violin

GIF of a histogram with animated data transition

Histogram dataset transition

How to animate the transition between datasets

GIF of a data update on a React barplot

Barplot dataset transition

How to smoothly animate the transition between dataset

GIF of a line chart that animates between 2 dataset

Line chart with dataset transition

How to smoothly animate the transition between 2 dataset on a line chart

GIF of a streamgraph react component that supports hover effect

Streamgraph with hover effect

How to add a hover effect on a streamgraph to highlight a group

GIF of a streamgraph

Offset and Smoothing transition

An interactive streamgraph example showing how to animate transition between the chart stacking features.

GIF of a streamgraph with multiple interactive features

Streamgraph application

Streamgraph with a slider to zoom on a time stamp and with interactive inline legends

General Knowledge


👋 Hey, I'm Yan and I'm currently working on this project!

Feedback is welcome ❤️. You can fill an issue on Github, drop me a message on Twitter, or even send me an email pasting with You can also subscribe to the newsletter to know when I publish more content!