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

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.

TypeScript

// 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);
});

JavaScript

// 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

Open in CodePen