Show a range of dates in a tooltip of a DateAxis when grouping data

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

• Data item grouping
• Adapters
• Date formatter

Demo

See the Pen Show range of dates in a tooltip of a DateAxis when grouping data by amCharts team (@amcharts) on CodePen.