Skip to content
amCharts 5

Bubble chart with zoom in and out buttons

This demo shows how we can add plus/minus buttons to a bubble chart that zoom in and out the chart.

Code

Section titled “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);
});

Demo

Section titled “Demo”
Open in:New tabChart Maker
Bubble chart with zoom in and out buttonsbubble-chart-with-zoom-in-and-out-buttons