Show range of dates in a multi-interval DateAxis label

This demo shows how we can make a DateAxis automatically show a range of dates if its cell spans multiple periods, using an adapter.

Code

xAxis.get("renderer").labels.template.adapters.add("text", function(text, target) {
  if (target.dataItem) {
    let interval = xAxis.getPrivate("gridInterval");
    if (interval.count > 1) {
      // Label covers more than one period
      let date = new Date(target.dataItem.get("value"));
      let formats = xAxis.get("dateFormats");
      let format = formats[interval.timeUnit]
      let text = root.dateFormatter.format(date, format);
      text += " - " + root.dateFormatter.format(am5.time.add(date, interval.timeUnit, interval.count - 1), format);
      return text;
    }
  }
  return text;
});

xAxis.get("renderer").labels.template.adapters.add("text", function(text, target) {
  if (target.dataItem) {
    var interval = xAxis.getPrivate("gridInterval");
    if (interval.count > 1) {
      // Label covers more than one period
      var date = new Date(target.dataItem.get("value"));
      var formats = xAxis.get("dateFormats");
      var format = formats[interval.timeUnit]
      var text = root.dateFormatter.format(date, format);
      text += " - " + root.dateFormatter.format(am5.time.add(date, interval.timeUnit, interval.count - 1), format);
      return text;
    }
  }
  return text;
});

Example

See the Pen
Showing the range of the DateAxis cell by amCharts team (@amcharts)
on CodePen.0