Value axis

Value axis is used for plotting numeric values.

Axis value scope

Custom scope

Value axis will automatically calculate its scope (min and max values) based on range of values of visible data items from series.

We can override those values by specifying min and max settings manually:

let yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    min: 0,
    max: 100,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    min: 0,
    max: 100,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

We can specify both min and max, or just one of them. If either min or max is not set, the axis will use automatically-calculated value for it.

Strict min/max

If we specify min and max, value axis will take it into consideration, but might still modify them in order to make scale look neater, based on available space and grid density, so that axis scale starts and ends at "nice" numbers.

If we absolutely need axis to start and/or end and precise values set in min and/or max, we can set axis setting strictMinMax to true:

let yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    min: 20,
    max: 80,
    strictMinMax: true,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    min: 20,
    max: 80,
    strictMinMax: true,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

Relative scope extension

We can also make value axis expand its scope relatively to automatically-calculated range, using its extraMin and extraMax settings.

Those are relative values indicating how much of the automatically-calculated value range to add to either min or max.

For example, extraMax: 0.1 will mean 10% of the current value range. If our axis scope is from 0 to 100, the new max will be 110.

let yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    extraMax: 0.1,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    extraMax: 0.1,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

Logarithmic scale

Enabling

To enable logarithmic scale on a value axis, we can simply set its logarithmic setting to true:

let yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    logarithmic: true,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    logarithmic: true,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

Avoiding zero values

If our data contains zero values, logarithmic scale might be problematic, since logarithm of a zero is an invalid mathematical operation.

To work around such cases, value axis adds a setting treatZeroAs.

We can set it to a super small number, so when axis encounters a zero, it will consider the alternative number instead, preventing critical failure.

let yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    logarithmic: true,
    treatZeroAs: 0.000001
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    logarithmic: true,
    treatZeroAs: 0.000001,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

Base value

A base value (or a zero value) is a number which separates positive and negative numbers.

It can affect how actual series are plotted.

For example, column series plots columns upwards for positive numbers, and downwards for negative ones.

By default, base value is 0 (zero).

Should we need to, we can change it using value axis' baseValue setting:

let yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    baseValue: 100,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    baseValue: 100,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

Calculated values

If our chart setup requires some derivative values, e.g. sums, changes, etc., to be used either for plotting of series, or displaying in tooltips/legend, we need to enable such calculation on a related value axis.

For that we have calculateTotals setting, which needs to be set to true.

The process is described in great detail in "XY chart series: Display data fields".

Label format

Automatic formatting

Value axis will use global number formatter and format settings set on it to format numbers in its labels, with one exception: Value axis will control number of decimals so that it represents grid steps best.

For example, even if our global number format is set to "#.###" (which means up to 3 decimals), a value axis with very fine steps, may increase decimal number to be able to effectively show grid values, e.g. : 0.0001, 0.0002, etc.

Enforcing number precision

We can use value axis' maxPrecision setting to restrict maximum number of decimals.

For example, setting it to 0 (zero) will force an all-integer scale.

Please note that forcing maxPrecision will not just affect label formatting, but will also how and where grid lines are placed, as well as their density.

let yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    maxPrecision: 0,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    maxPrecision: 0,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

Fixed number format

We can specify a totally custom number format for the axis labels, too.

For that we use numberFormat setting:

let yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    numberFormat: "#.00'%'",
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    numberFormat: "#.00'%'",
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

Tooltip number format

If our chart setup has a cursor as well as tooltips enabled for the value axis, tooltips will be shown indicating value at precise position of the cursor.

Normally, axis will use the same number format for the tooltip as for its labels.

There are a couple of ways to modify it.

Extra precision

We can increase precision of the numbers displayed in the tooltip using extraTooltipPrecision setting.

It basically means: "use X more decimals in tooltip than we use for axis labels".

It is useful in situations where we have grid lines with increments in 1, 0.1, etc.

let yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    extraTooltipPrecision: 1,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    extraTooltipPrecision: 1,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

Overriding format

Similarly to how we can override format for axis labels using numberFormat setting, we can force specific format for tooltips using tooltipNumberFormat as well:

let yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    numberFormat: "#.00'%'",
    tooltipNumberFormat: "#.00'%'",
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    numberFormat: "#.00'%'",
    tooltipNumberFormat: "#.00'%'",
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

Zooming

Zooming to value range

We can use value axis' method zoomToValues() to zoom the axis to specific value range:

yAxis.zoomToValues(100, 200);
yAxis.zoomToValues(100, 200);

Pre-zooming

Once data is loaded on some series the axis gets its scope of values from, we can use zoomToValues to pre-zoom it to some valuerange:

series.events.once("datavalidated", function(ev) {
  ev.target.get("xAxis").zoomToValues(100, 200);
});
series.events.once("datavalidated", function(ev) {
  ev.target.get("xAxis").zoomToValues(100, 200);
});

Read more about pre-zooming using series events in "XY chart axes: Pre-zooming axes".

Syncing grid

If the chart has multiple value axes, it will each have own value scale and thus will calculate position of its grid using own logic. This might result in a chart with a relatively messy grid.

For that there's a value axis' setting: syncWithAxis.

It needs to be set to an instance of another value axis that we want grid to be synced with.

let yAxis1 = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));


let yAxis2 = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  syncWithAxis: yAxis1,
  renderer: am5xy.AxisRendererY.new(root, {
    opposite: true
  })
}));
var yAxis1 = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));


var yAxis2 = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  syncWithAxis: yAxis1,
  renderer: am5xy.AxisRendererY.new(root, {
    opposite: true
  })
}));

NOTEsyncWithAxis setting is experimental and is not guaranteed to work perfectly in 100% of scenarios.

See the Pen
amCharts 5: Clustered columns
by amCharts team (@amcharts)
on CodePen.0

Events

Value axis does not have specific events that are triggered when it is zoomed.

Instead, we can use private setting change events on selectionMin and selectionMax private settings:

xAxis.onPrivate("selectionMin", function(start, target) {
  console.log("Start value changed:", start);
});

xAxis.onPrivate("selectionMax", function(end, target) {
  console.log("End value changed:", end);
});
xAxis.onPrivate("selectionMin", function(start, target) {
  console.log("Start value changed:", start);
});

xAxis.onPrivate("selectionMax", function(end, target) {
  console.log("End value changed:", end);
});