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.