This demo shows how we can show a data range of a grouped data items in a DateAxis tooltip.
Code
let xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { groupData: true, baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, {}), tooltip: am5.Tooltip.new(root, {}) }) ); let xTooltip = xAxis.get("tooltip"); xTooltip.label.adapters.add("text", function(text, target) { let series = chart.series.getIndex(0); let dataItem = series.get("tooltipDataItem"); if (dataItem) { let start = dataItem.get("valueX"); let end = start + am5.time.getIntervalDuration(xAxis.getPrivate("groupInterval")) - 1; let text = root.dateFormatter.format(new Date(start), xAxis.get("tooltipDateFormats")["day"]); let endText = root.dateFormatter.format(new Date(end), xAxis.get("tooltipDateFormats")["day"]); if (text != endText) { text += " — " + endText; } } return text; });
var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { groupData: true, baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, {}), tooltip: am5.Tooltip.new(root, {}) }) ); var xTooltip = xAxis.get("tooltip"); xTooltip.label.adapters.add("text", function(text, target) { var series = chart.series.getIndex(0); var dataItem = series.get("tooltipDataItem"); if (dataItem) { var start = dataItem.get("valueX"); var end = start + am5.time.getIntervalDuration(xAxis.getPrivate("groupInterval")) - 1; var text = root.dateFormatter.format(new Date(start), xAxis.get("tooltipDateFormats")["day"]); var endText = root.dateFormatter.format(new Date(end), xAxis.get("tooltipDateFormats")["day"]); if (text != endText) { text += " — " + endText; } } return text; });
Related info
Demo
See the Pen
Show range of dates in a tooltip of a DateAxis when grouping data by amCharts team (@amcharts)
on CodePen.0