Aggregating multiple data items into a single tooltip of the data items with same X/Y

This demo shows how we can use an adapter on a series tooltip to automatically aggregate information from multiple data items width same x/y coordinates on a bubble chart.

Code

First, we'll make all bubbles visible, by setting their fillOpacity to something less than 1, so they're semi-transparent and are visible, even when they are overlapping each other.

let circleTemplate = am5.Template.new({});
series.bullets.push(function() {
  var graphics = am5.Circle.new(root, {
    fill: series.get("fill"),
    fillOpacity: 0.5
  }, circleTemplate);
  return am5.Bullet.new(root, {
    sprite: graphics
  });
});

var circleTemplate = am5.Template.new({});
series.bullets.push(function() {
  var graphics = am5.Circle.new(root, {
    fill: series.get("fill"),
    fillOpacity: 0.5
  }, circleTemplate);
  return am5.Bullet.new(root, {
    sprite: graphics
  });
});

Then we'll add an adapter to series' tooltip to collect all data items with the same X/Y and combine their information into tooltip contents.

var tooltip = series.get("tooltip").adapters.add("labelText", function(text, target) {
  let targetDataItem = target.dataItem;
  if (targetDataItem) {
    let values = [];
    text = "X: {valueX}\nY: {valueY}";
    am5.array.each(series.dataItems, function(dataItem) {
      if (dataItem.get("valueX") == targetDataItem.get("valueX") && dataItem.get("valueY") == targetDataItem.get("valueY")) {
        values.push(dataItem.dataContext.title);
      }
    });
    text += "\nNames: " + values.join(", ");
  }
  return text;
});

var tooltip = series.get("tooltip").adapters.add("labelText", function(text, target) {
  var targetDataItem = target.dataItem;
  if (targetDataItem) {
    var values = [];
    text = "X: {valueX}\nY: {valueY}";
    am5.array.each(series.dataItems, function(dataItem) {
      if (dataItem.get("valueX") == targetDataItem.get("valueX") && dataItem.get("valueY") == targetDataItem.get("valueY")) {
        values.push(dataItem.dataContext.title);
      }
    });
    text += "\nNames: " + values.join(", ");
  }
  return text;
});

Demo

See the Pen Aggregating multiple data items into a single tooltip of the data items with same X/Y coordinates by amCharts team (@amcharts) on CodePen.