Radar charts with images as labels

I'm using this module & want to tweak it a little so as it can plot an image over the label rather than plain text

https://www.outsystems.com/forge/component-overview/5344/spider-web-chart

I think my issue is needing to pass an image into the xAxis labels component. I've tried the following & it's not working. I'm just using the image embedded in the forge component for now to get it tested, will look at making it dynamic through an input afterwards, assuming it's all possible of course...

SyntaxEditor Code Snippet

xAxis: {
    categories: [" + String_Join(Categories, ", ") + "],
    tickmarkPlacement: 'on',
    lineWidth: 0, 
    labels: {
        formatter: function() {                
            return '<img src='/SpiderWebChart/img/SpiderWebChartImage.png' style='width: 30px; height: 30px;' />';
        },
    }
},

Steve Webb wrote:

I'm using this module & want to tweak it a little so as it can plot an image over the label rather than plain text

https://www.outsystems.com/forge/component-overview/5344/spider-web-chart

I think my issue is needing to pass an image into the xAxis labels component. I've tried the following & it's not working. I'm just using the image embedded in the forge component for now to get it tested, will look at making it dynamic through an input afterwards, assuming it's all possible of course...

SyntaxEditor Code Snippet

xAxis: {
    categories: [" + String_Join(Categories, ", ") + "],
    tickmarkPlacement: 'on',
    lineWidth: 0, 
    labels: {
        formatter: function() {                
            return '<img src='/SpiderWebChart/img/SpiderWebChartImage.png' style='width: 30px; height: 30px;' />';
        },
    }
},

So I'm closer now. When I plot the below it brings through the image, within a <span>. It doesn't display anything initially, but if I inspect the element through Chrome DevTools and switch off the position style attribute of "highcharts-xaxis-labels div" (the div containing all the spans & images therein) it comes out like the attached image.

Any thoughts where I'm going wrong, or where I should look? How do i access these properties so as they are displayed, & displayed in the correct place?

For info, my code edits tot he original are below. it was all to do with quotation marks....

SyntaxEditor Code Snippet

labels: {
    useHTML: true,
    formatter: function(){
        return '<img src=" + Chr(34) + "/SpiderWebChart/img/SpiderWebChartImage.png" + Chr(34) + " style=" + Chr(34) + "width: 30px; height: 30px;" + Chr(34) + "></img>';
    }
}