Disable Auto Chart Move on new data push

by

Summary

The default behavior of AmCharts 5 is to move the chart when new data is pushed into the series, which can be annoying when viewing historical data. The goal is to disable auto chart move on new data push.

Root Cause

The root cause of this issue is the default behavior of AmCharts 5, which is designed to adjust the chart position for new data. The reasons for this behavior include:

  • Automatic scaling: The chart adjusts its scale to fit the new data.
  • Default animation: The chart animates the movement to the new position.

Why This Happens in Real Systems

This issue occurs in real systems because:

  • Historical data viewing: When viewing historical data, the auto chart move feature can be distracting and annoying.
  • Unintended behavior: The default behavior may not be intuitive for users who expect the chart to remain stationary.

Real-World Impact

The impact of this issue includes:

  • Poor user experience: The glitchy effect caused by the attempted fix can be frustrating for users.
  • Inaccurate representation: The chart movement can obscure important data points or trends.

Example or Code

let prevDL = 0;
let prevPos = [0, 0];
this.root.events.on('frameended', () => {
  let start = this.dateAxis.getPrivate('selectionMin');
  let end = this.dateAxis.getPrivate('selectionMax');
  let dl = this.valueSeries?.data.length;
  if (!(start && end && dl && this.valueSeries)) return;
  let pos = [start, end];
  if (prevPos[0] && prevPos[1] && prevDL && prevDL < dl) {
    this.dateAxis.setAll({
      start: this.dateAxis.valueToPosition(prevPos[0]),
      end: this.dateAxis.valueToPosition(prevPos[1])
    });
    pos = prevPos;
  }
  prevPos = pos;
  prevDL = dl;
});

How Senior Engineers Fix It

Senior engineers fix this issue by:

  • Understanding the default behavior: Recognizing the intended purpose of the auto chart move feature.
  • Using the correct API: Utilizing the AmCharts 5 API to disable the default animation or adjust the chart position manually.
  • Implementing a smooth fix: Applying a smoother and more accurate solution to prevent the glitchy effect.

Why Juniors Miss It

Juniors may miss this issue because:

  • Lack of experience: Insufficient familiarity with AmCharts 5 and its default behaviors.
  • Incomplete understanding: Failure to fully comprehend the requirements and constraints of the project.
  • Inadequate testing: Insufficient testing and validation of the solution, leading to the glitchy effect.