This demo shows how we can add plus/minus buttons to a bubble chart that zoom in and out the chart.
Code
The code relies on adding custom buttons to chart plot container, as well as attaching click events to them, that in turn zoom the chart using axis' API.
// Disable built-in zoomout button chart.zoomOutButton.set("forceHidden", true); // Add zoom buttons let zoom = chart.plotContainer.children.push(am5.Container.new(root, { layout: root.horizontalLayout, centerX: am5.p100, x: am5.p100, dx: -10, dy: 10 })); let zoomin = zoom.children.push(am5.Button.new(root, { width: 36, height: 36, icon: am5.Graphics.new(root, { stroke: am5.color(0xffffff), x: am5.p50, y: am5.p50, draw: function(display) { display.moveTo(-4, 0); display.lineTo(4, 0); display.moveTo(0, -4); display.lineTo(0, 4); } }) })); let zoomout = zoom.children.push(am5.Button.new(root, { width: 36, height: 36, icon: am5.Graphics.new(root, { stroke: am5.color(0xffffff), x: am5.p50, y: am5.p50, draw: function(display) { display.moveTo(-4, 0); display.lineTo(4, 0); } }) })); let zoomStep = 0.1; zoomin.events.on("click", function() { let x1 = xAxis.get("start") + zoomStep; let x2 = xAxis.get("end") - zoomStep; if ((x2 - x1) > zoomStep) { xAxis.zoom(x1, x2); } let y1 = yAxis.get("start") + zoomStep; let y2 = yAxis.get("end") - zoomStep; if ((y2 - y1) > zoomStep) { yAxis.zoom(y1, y2); } }); zoomout.events.on("click", function() { let x1 = xAxis.get("start") - zoomStep; let x2 = xAxis.get("end") + zoomStep; if (x1 < 0) { x1 = 0; } if (x2 > 1) { x2 = 1; } xAxis.zoom(x1, x2); let y1 = yAxis.get("start") - zoomStep; let y2 = yAxis.get("end") + zoomStep; if (y1 < 0) { y1 = 0; } if (y2 > 1) { y2 = 1; } yAxis.zoom(y1, y2); });
// Disable built-in zoomout button chart.zoomOutButton.set("forceHidden", true); // Add zoom buttons var zoom = chart.plotContainer.children.push(am5.Container.new(root, { layout: root.horizontalLayout, centerX: am5.p100, x: am5.p100, dx: -10, dy: 10 })); var zoomin = zoom.children.push(am5.Button.new(root, { width: 36, height: 36, icon: am5.Graphics.new(root, { stroke: am5.color(0xffffff), x: am5.p50, y: am5.p50, draw: function(display) { display.moveTo(-4, 0); display.lineTo(4, 0); display.moveTo(0, -4); display.lineTo(0, 4); } }) })); var zoomout = zoom.children.push(am5.Button.new(root, { width: 36, height: 36, icon: am5.Graphics.new(root, { stroke: am5.color(0xffffff), x: am5.p50, y: am5.p50, draw: function(display) { display.moveTo(-4, 0); display.lineTo(4, 0); } }) })); var zoomStep = 0.1; zoomin.events.on("click", function() { var x1 = xAxis.get("start") + zoomStep; var x2 = xAxis.get("end") - zoomStep; if ((x2 - x1) > zoomStep) { xAxis.zoom(x1, x2); } var y1 = yAxis.get("start") + zoomStep; var y2 = yAxis.get("end") - zoomStep; if ((y2 - y1) > zoomStep) { yAxis.zoom(y1, y2); } }); zoomout.events.on("click", function() { var x1 = xAxis.get("start") - zoomStep; var x2 = xAxis.get("end") + zoomStep; if (x1 < 0) { x1 = 0; } if (x2 > 1) { x2 = 1; } xAxis.zoom(x1, x2); var y1 = yAxis.get("start") - zoomStep; var y2 = yAxis.get("end") + zoomStep; if (y1 < 0) { y1 = 0; } if (y2 > 1) { y2 = 1; } yAxis.zoom(y1, y2); });
Demo
See the Pen Bubble chart with zoom in and out buttons by amCharts team (@amcharts) on CodePen.