1

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.

TroyWolf
  • 346
  • 2
  • 5

0 Answers0