• Open in:

Sorted Bar Chart

Sorting a bar chart by bar’s value is a common scenario that is easily implemented by sorting the underlying data beforehand. But what if data is constantly updated? This demo shows an approach to solving the real-time sorting problem that is both functional and visually appealing.

Key implementation details

On each data update we calculate the item’s position delta and set an animation on the data-item. Then we instantly change its position based on the sort order. But when the position changes the bar doesn’t jump into its new place immediately – it goes there in a smooth animation.

Demo source