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:

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:

Here’s another example, with Value axes on both X and Y. Both with pre-zoom:

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:

Alternative options

Relative pre-zooming

So far in this tutorial we’ve looked at pre-zooming to specific dates. However, sometimes we might not care about that, but rather pre-zoom to a relative specific portion of the chart.

For example, what if we would like to pre-zoom to the last 20% of the chart, regardless of the actual scope?

In this case we can use axis’ start and end properties.

Both of those are relative values between 0 (zero) and 1 (one) indicating relative range between first and last data item in the data.

Going back to our tasks of pre-zooming to the last 20% we would have to set those to 0.8 and 1 respectively:

dateAxis.start = 0.8;
dateAxis.end = 1;
dateAxis.keepSelection = true;

dateAxis.start = 0.8;
dateAxis.end = 1;
dateAxis.keepSelection = true;

{
  // ...
  "xAxes": [{
    // ...
    "start": 0.8,
    "end": 1,
    "keepSelection": true
  }]
}

Here’s a working example:

Zooming axis via API / external scrollbar