Fixed Scale of Value Axis

Value axes in amCharts 4 will automatically adjust their scales to fit currently shown Series' values as best as possible. This means that scale may, and probably will, change when you zoom/pan the chart, or toggle some series. This tutorial will show how you can easily "lock" the scale in place.

Adaptive scale

Here's how scale of the Value axis changes based on zoom and series availability:

• 

• 

• 

• 

This behavior is usually fine. It allows the user to better see data dynamics of the particular zoomed section.

However, in some cases, this constant scale changes might be disorienting.

Manual scale

Value axis has two useful features: min and max.

Those instruct the axis to use hard-coded values as its lowest scale end (min) and highest (max).

MORE INFO Manual scale adjustments are described in "Adjusting scale" section of our "Axes" tutorial, so we are not going to get into further details here.

While min/max to their job, they are not very convenient, because they require knowing range of values beforehand, which is not always easy, or even possible.

Let's see how we can make this dynamic instead.

Dynamic fixed scale

This brings us to the final piece of the puzzle: dynamically fixing the scale of the Value axis.

Besides min and max settings, Value axis has and two read-only properties: minZoomed and maxZoomed.

These always hold the smallest and biggest value in currently zoomed chart range.

Since chart always starts out as fully zoomed out, those will hold absolutely smallest and biggest values in all of the chart's series'.

So, the solution is rather simple: when chart loads, set Value axis min to minZoomed, and max to maxZoomed.

To do that, we're going to utilize chart's "ready" event.

chart.events.on("ready", function(ev) {
  valueAxis.min = valueAxis.minZoomed;
  valueAxis.max = valueAxis.maxZoomed;
});

chart.events.on("ready", function(ev) {
  valueAxis.min = valueAxis.minZoomed;
  valueAxis.max = valueAxis.maxZoomed;
});

{
  // ...
  "events": {
    "ready": function(ev) {
      var valueAxis = ev.target.yAxes.getIndex(0);
      valueAxis.min = valueAxis.minZoomed;
      valueAxis.max = valueAxis.maxZoomed; 
    }
  }
}

Now, no matter how we zoom, the scale will stay put:

• 

• 

• 

• 

And here's the live chart:

See the Pen amCharts 4: Auto-fixing value axis scale by amCharts team (@amcharts) on CodePen.0