Configuring the zoom out button

When XYChart is zoomed in, a small round button appears in the corner to indicate that only partial data is show, and to provide means to zoom back out. This tutorial will show how you can configure, or outright disable this control.

Button element

The zoom out button is accessible via chart's zoomOutButton property. It's an object of type Button, and we are going to be using it in order to configure it.

Positioning

Aligning

By default, the zoom out button is positioned in the upper right corner of the plotContainer of the chart.

To reposition it horizontally, we can use its align property, and to move vertically - valign.

The below code will place the button in the lower-right corner:

chart.zoomOutButton.align = "left";
chart.zoomOutButton.valign = "bottom";

chart.zoomOutButton.align = "left";
chart.zoomOutButton.valign = "bottom";

{
  // ...
  "zoomOutButton": {
    "align": "left",
    "valign": "bottom"
  }
}

NOTE While changing position of the button, you might also want to change its marginLeft and marginBottom to give if some space.

See the Pen amCharts 4: Configuring Zoom Out button by amCharts team (@amcharts) on CodePen.0

Placing outside plot area

If you'd rather move the zoom out button outside plot area, you can simply use its parent property to move it somewhere else, e.g. to tooltipContainer which spans whole area of the chart:

chart.zoomOutButton.parent = chart.tooltipContainer;

chart.zoomOutButton.parent = chart.tooltipContainer;

{
  // ...
  "zoomOutButton": {
    "callback": function() {
      this.parent = this.baseSprite.tooltipContainer;
    }
  }
}

See the Pen amCharts 4: Configuring Zoom Out button by amCharts team (@amcharts) on CodePen.0

Disabling

In some case you might not want the zoom out button appearing at all. Maybe you have a scrollbar, or some external controls.

In such case you can simply set button's disabled property to true:

chart.zoomOutButton.disabled = true;

chart.zoomOutButton.disabled = true;

{
  // ...
  "zoomOutButton": {
    "disabled" true
  }
}

Changing appearance

As we already mentioned, zoom out button is an object of type Button.

This means we can use its properties to configure it any way we need.

Let's make it not round by reducing corner radius of its background, as well as change colors:

chart.zoomOutButton.background.cornerRadius(5, 5, 5, 5);
chart.zoomOutButton.background.fill = am4core.color("#25283D");
chart.zoomOutButton.icon.stroke = am4core.color("#EFD9CE");
chart.zoomOutButton.icon.strokeWidth = 2;
chart.zoomOutButton.background.states.getKey("hover").properties.fill = am4core.color("#606271");

chart.zoomOutButton.background.cornerRadius(5, 5, 5, 5);
chart.zoomOutButton.background.fill = am4core.color("#25283D");
chart.zoomOutButton.icon.stroke = am4core.color("#EFD9CE");
chart.zoomOutButton.icon.strokeWidth = 2;
chart.zoomOutButton.background.states.getKey("hover").properties.fill = am4core.color("#606271");

{
  // ...
  "zoomOutButton": {
    "background": {
      "fill": "#25283D",
      "cornerRadiusTopLeft": 5,
      "cornerRadiusTopRight": 5,
      "cornerRadiusBottomRight": 5,
      "cornerRadiusBottomLeft": 5,
      "states": {
        "hover": {
          "properties": {
            "fill": "#606271"
          }
        }
      }
    },
    "icon": {
      "stroke": "#EFD9CE",
      "strokeWidth": 2
    }
  }
}

See the Pen amCharts 4: Configuring Zoom Out button by amCharts team (@amcharts) on CodePen.0

Replacing the image

Let's go one step further and replace a custom minus image which appears on zoom out button with something more custom. Say a magnifying class.

• 

• 

There are a few steps to it. Let's walk through all of them.

Removing default icon

A default icon resides in button's icon property.

To get rid of it, we'll simply need to to disable it:

chart.zoomOutButton.icon.disabled = true;

chart.zoomOutButton.icon.disabled = true;

{
  // ...
  "zoomOutButton": {
    "icon": {
      "disabled": true
    }
  }
}

Adding custom image

Now that our button is empty, let's an image to it.

We do that by creating a child element of an Image type:

let zoomImage = chart.zoomOutButton.createChild(am4core.Image);
zoomImage.href = "/path/to/zoomImage.png";
zoomImage.width = 15;
zoomImage.height = 15;
zoomImage.interactionsEnabled = false;

var zoomImage = chart.zoomOutButton.createChild(am4core.Image);
zoomImage.href = "/path/to/zoomImage.png";
zoomImage.width = 15;
zoomImage.height = 15;
zoomImage.interactionsEnabled = false;

{
  // ...
  "zoomOutButton": {
    "icon": {
      "disabled": true
    },
    "children": [{
      "type": "Image",
      "forceCreate": true,
      "href": "/path/to/zoomImage.png",
      "width": 15,
      "height": 15,
      "interactionsEnabled": false
    }]
  }
}

Besides creating an instance of Image we also need to at least set its width and height, as well as href which points to the actual image.

NOTE A href parameter can also be a "data uri", a base64-encoded representation of an image. Refer to the example below.

NOTE A interactionsEnabled = false parameter is required so that hovering icon does not "steal" hover effect of the button itself.

Custom image example

See the Pen amCharts 4: Using custom image in ZoomOutButton by amCharts team (@amcharts) on CodePen.24419