• Open in:

Bar Chart Race

Bar Chart Race is a great and highly visual way to display data changing over time in the form of an animated bar chart. It’s a very comprehensible representation of time-based changes in data.

Key implementation details

In this demo we have year-based data, and we interpolate the values in a linear fashion inside the year to show smooth continuous growth. We [re]sort series on the category (Y) axis from high to low and then we calculate the necessary zoom level to zoom-in to a point where only the non-zero items are visible.

Finally, on each step we calculate the series position delta and set an animation on the data-item, so when its position changes it doesn’t jump into its new place immediately but goes there in a smooth animation.

Demo source