I have a chart with a legend whose symbol I replaced per the example in the docs. It looks like this:
var marker = chart.legend.markers.template;
marker.disposeChildren();
let dollar = marker.createChild(am4core.Image);
dollar.width = 40;
dollar.height = 40;
dollar.verticalCenter = "top";
dollar.horizontalCenter = "left";
dollar.strokeWidth = 2;
dollar.strokeOpacity = 1;
dollar.adapter.add("href", function (href: any, target: any) {
return `http://host.com?id=${target.dataItem.dataContext.dummyData.value`;
});
And this works, my images are displayed, little faces :) - I would like to add a border around the image of the same color of the series so that you can identify the marker in the legend with the series. But I can't find the right set of settings to make this a thing.
Is this possible?
EDIT - So, I tried the following chage to the above and got a decent result. It's a bit hacky, so there might be a better way. If not, I guess this works.
//marker.disposeChildren(); <= don't do this
marker.width = "50px";
marker.height = "50px";
Basically the original marker remains and is behind the image. The marker has to be made larger so that it sticks out and creates a pseudo border.
I'm going to answer this one myself, since I have a working solution and no one lese answered :)
The edit above does what it is needed. Doesn't see like a great solution, a border around an image should be doable. But this gets us what we want.
Solution:
Make the marker bigger than the image Place the image above the marker
In this case, we do not remove child elements of the marker, like the sample code on amchart4 shows, since you need it.