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).
Related tutorials
Build this chart with AI
The prompt below can be used to build this chart with AI. For best coding results, use the most advanced AI models, like Claude Opus 4.6 and GPT-5.3-Codex. For more info and tips, check out amCharts AI docs.
Create a horizontal bar chart showing step counts for six people with circular profile image bullets at bar endpoints. On hover, bullets should smoothly animate from the left end to the right end of the bar by animating locationX of a Bullet. Use amCharts 5 library.
Demo source