How to Configure the Y-Axis Minimum as '00:00' in AmCharts (JavaScript)?

Other Questions JavaScript Closures
1

I face issues aligning the time axis: the blue (print time) and red (SLA) lines misbehave. Setting the minimum to ‘00:00’ is ineffective. Sample code:

var newChart = buildChart('displayDiv', {
  type: 'serial',
  theme: 'dark',
  timeFormat: 'HH:mm:ss',
  data: [
    { date: '10/10/21', timeVal: '04:20:00', duration: 480 },
    { date: '11/10/21', timeVal: '05:10:00', duration: 510 }
  ],
  axes: [{
    id: 'timeAxis',
    position: 'left',
    minValue: '00:00',
    axisType: 'time'
  }]
});
2

I encountered this issue on a recent project where dealing with time axes in AmCharts proved tricky. After spending some time debugging, I learned that using a plain string for minValue, such as ‘00:00’, can lead to unexpected behaviors because the chart expects comparable date objects instead of strings. Changing the configuration to convert the time string into a proper Date instance, or adjusting the input data to date objects, proved to be a more robust approach. In this case, ensuring that the date format for both your data and the axis aligns correctly is critical for resolving inconsistencies.