Amcharts 4 TreeMap bullet link

Question

I have one level treemap from amcharts4.

I'm trying to set a link for each bullet when click on it, but can't achieve what I want.

As documentation says I tried:

level1_bullet.label.url = "https://www.google.com/";

or

level1_bullet.url = "https://www.google.com/";

both doesn't work, I was able to add

level1_bullet.label.html = "<a href='https://google.com/'>{name}</a>";

but there is a problem with truncate option which doesnt work and I can see too big names for smallest bullets, wrap also didn't help.

Answer 1

To turn a LabelBullet into a link, try:

level1_bullet.label.url = "https://www.google.com/";

If we want dynamic urls, we'll have to use an adapter. The url is a simple string that's not really intended for display, so it doesn't go through our string formatting, which means placeholders like {name} won't get parsed. Fortunately Labels have an adapter for their url. It can look something like this:

level1_bullet.label.adapter.add("url", function(url, label) {
  var query = "";
  var data = label.dataItem;
  if (data.dataContext && data.dataContext.name) {
    query = "?q=" + data.dataContext.name;
  }
  return url + query;
});

The adapter's handler has the url that's set to the Label ("https://www.google.com/" in this case) as the first argument and the Label instance as the second argument. What we return ends up being our custom-formatted url, i.e. it doesn't set it permanently, this is run every time your app is figuring out what the value for url should be.

I've created a demo here:

https://codepen.io/team/amcharts/pen/79194dfcfccaa05f5ebe20e1095f3087

Let me know if this makes sense, if this at all helps with what you were looking to do.