Position X-axis on zero-value

Normally, the X-axis will be shown at the bottom of the plot container, regardless of the Y-axis scale. This tutorial shows how we can make the X-axis dynamically position itself so that it sticks to the position of the zero value.

Code

The idea is to watch for various events that could affect position of the X-axis, then position it accordingly:

• Y axis was scaled.
• Size of the plot container changed.
• Position of the container with Y-axes and plot container changed.

// Configure axis

let xRenderer = xAxis.get("renderer");
xRenderer.labels.template.set("centerY", 0);
xRenderer.labels.template.set("paddingTop", 6);
xRenderer.set("strokeOpacity", 1);

// Set up events
yAxis.on("start", updateAxisPosition);
yAxis.on("end", updateAxisPosition);
chart.yAxesAndPlotContainer.events.on("positionchanged", updateAxisPosition);
chart.plotContainer.events.on("boundschanged", updateAxisPosition);

function updateAxisPosition() {
  let plotHeight = chart.plotContainer.height();
  let y = yAxis.get("renderer").positionToCoordinate(yAxis.valueToPosition(0)) - plotHeight;
  if (y > 0) {
    y = 0;
  }

  if (y < -plotHeight) {
    y = -plotHeight;
  }

  xAxis.set("y", y);
}

// Configure axis
var xRenderer = xAxis.get("renderer");
xRenderer.labels.template.set("centerY", 0);
xRenderer.labels.template.set("paddingTop", 6);
xRenderer.set("strokeOpacity", 1);

// Set up events
yAxis.on("start", updateAxisPosition);
yAxis.on("end", updateAxisPosition);
chart.yAxesAndPlotContainer.events.on("positionchanged", updateAxisPosition);
chart.plotContainer.events.on("boundschanged", updateAxisPosition);

function updateAxisPosition() {
  var plotHeight = chart.plotContainer.height();
  var y = yAxis.get("renderer").positionToCoordinate(yAxis.valueToPosition(0)) - plotHeight;
  if (y > 0) {
    y = 0;
  }

  if (y < -plotHeight) {
    y = -plotHeight;
  }

  xAxis.set("y", y);
}

Demo

See the Pen XAxis on 0 grid position by amCharts team (@amcharts) on CodePen.