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.