Pre-zooming an axis

This tutorial will explain how you can set up your charts to initialize pre-zoomed.

Prerequisites

This tutorial relies on event handlers. We recommend reading up on how events work in amCharts 4 in "Event Listeners" article.

Reference chart

Let's start off with a simple date-based chart:

See the Pen amCharts V4: Pre-zooming Date axis (1) by amCharts (@amcharts) on CodePen.24419

Setting up pre-zoom

There currently are no properties on axes that could be used to tell it to "start off zoomed from X to Y". By default charts (and is axes) will started full zoomed out, showing full scope of data.

We're going to be using event handler to catch the moment when chart is ready then use axis methods to trigger zoom.

The most perfect event for our purposes is "ready" which kicks in when our chart data is ready, but before the chart had a chance to draw itself.

Since we're going to be using a chart with Date axis as an example, the handler for our event will call axis' zoomToDates() method.

Here's how the code might look like:

chart.events.on("ready", function () {
  dateAxis.zoomToDates(
    new Date(2018, 3, 23),
    new Date(2018, 3, 26)
  );
});
chart.events.on("ready", function () {
  dateAxis.zoomToDates(
    new Date(2018, 3, 23),
    new Date(2018, 3, 26)
  );
});
{
  // ...
  "events": {
    "ready": function(ev) {
      ev.target.xAxes.getIndex(0).zoomToDates(
        new Date(2018, 3, 23),
        new Date(2018, 3, 26)
      );
    }
  }
}

Now, when you run the the chart, it will start fully zoomed out, then will zoom to particular date range:

See the Pen amCharts V4: Pre-zooming Date axis (2) by amCharts (@amcharts) on CodePen.24419

IMPORTANT If you are using an animated theme, you also need to set showOnInit = false for your series. Animated series influences how chart zooms on init, hence disabling your pre-zoom, hence the need for showOnInit to be disabled.

NOTE This tutorial uses Date axis as an example, however this technique can be used with any axis type. There are zoomToCategories() method for Category axis, zoomToValues() method for value axis, as well as zoomToIndexes() which works for any axis type, but probably best for Category axis.

Making pre-zoom instant

If you are not using animated theme, your pre-zoom is already instant. However, if you have your charts animated, and want your chart to start of pre-zoomed instantly, without the animation, all you need to do is to add some parameters to zoom functions.

Namely the fourth parameter to zoomToDates indicates whether zoom should be instant.

The following will make the chart start off pre-zoomed, even with animated theme enabled:

dateAxis.showOnInit = false;
// ...
chart.events.on("ready", function () {
  dateAxis.zoomToDates(
    new Date(2018, 3, 23),
    new Date(2018, 3, 26),
    false,
    true // this makes zoom instant
  );
});
dateAxis.showOnInit = false;
// ...
chart.events.on("ready", function () {
  dateAxis.zoomToDates(
    new Date(2018, 3, 23),
    new Date(2018, 3, 26),
    false,
    true // this makes zoom instant
  );
});
{
  // ...
  "xAxes": [{
    // ...
    "showOnInit": false
  }],
  "events": {
    "ready": function(ev) {
      ev.target.xAxes.getIndex(0).zoomToDates(
        new Date(2018, 3, 23),
        new Date(2018, 3, 26),
        false,
        true // this makes zoom instant
      );
    }
  }
}

Let's see how it turned out:

See the Pen amCharts V4: Pre-zooming Date axis (3) by amCharts (@amcharts) on CodePen.24419