I created this codepen that configures an amcharts 5 instance with a map, 2 cities, a line between them, and a bullet (arrow) on the line.
If you hover the arrow on the line, you'll see a tooltip.
arrowSeries.bullets.push(function() {
var arrow = am5.Graphics.new(root, {
fill: am5.color(0x000000),
stroke: am5.color(0x000000),
draw: function (display) {
display.moveTo(0, -5);
display.lineTo(12, 0);
display.lineTo(0, 5);
display.lineTo(0, -5);
},
tooltipText: 'How to access `outbound` from the origin city here?',
});
return am5.Bullet.new(root, {
sprite: arrow
});
});
My question is how can I use data from my input cities in that tooltip?
In this stripped down example, I could just hard-reference my cities array. Of course what I am looking for is a way to pass the origin-destination pair data to the function that creates each instance of the Bullet (arrow). This way as I am iterating a larger set of city pairs to create the lines, each arrow can have a tooltip with data specific to each pair.