• Open in:

Motion Chart

Motion chart type was popularized by the great GapMinder.org. It’s great at showcasing the changes in some dataset on multiple dimensions (x, y, bubble size, color, etc.)

Key implementation details

There’s a lot going on in this chart including a map and more. Let’s focus on the core here. Our bubbles are actually bullets on a regular LineSeries with stroke set to invisible. Then we add a Slider and the bubble series data is updated in response to the slider’s rangechanged event. The play Button just starts the animation on the slider’s range.

Related tutorials

• Line series
• Bullets
• Slider
• Events
• Animations

Demo source