• Open in:

Zoomable Bubble Chart

A great thing about interactive charts is that you can put a lot of information into one chart and let users zoom in and out to see the data with varying level of detail. This demo shows a bubble chart with all the zooming features enabled.

Key implementation details

The key here is to enable all of the zooming and panning features on the XYChart itself: panX, panY, pinchZoomX, pinchZoomY are all set to true. And mouse-wheel behavior is set to zoom on both X and Y axes with wheelY: "zoomXY". Finally, we add both horizontal and vertical scrollbars to enable manual zooming and panning on each axis.

Related tutorials

Demo source