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:

Open in CodePen

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:

Open in CodePen

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.

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

Open in CodePen

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:

Open in CodePen

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:

TypeScript

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

JavaScript

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

JSON

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

Note

The keepSelection in the code above ensures that our initial zoom does not get reset when chart parses and validates data on first load.

Here’s a working example:

Open in CodePen

Related content

• Zooming axis via API / external scrollbar