• Open in:

Bars with Moving Bullets

Interactivity is a great way to direct viewers attention in visualizations. amCharts 5 helps you implement moving bullets in a conservative but effective bar chart to make it way more appealing without sacrificing the maximum comprehension level of this classic chart type.

Key implementation details

We setup bullets by first creating a Container and adding a Circle to it for the border. Then we add another container for the image. To make an image round we create another circle and set it as a mask on the image container. Then we add our first container to a new Bullet and position it at the bottom (left) of the parent element (locationX: 0).

On hover we animate the bullet to the top value (right) of the parent column (locationX: 1).

Demo source