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