How to display legend box in tooltip text for amCharts 5 in Rails application?

Question

I'm working on a Rails application where I'm using amCharts 5 to create charts. I have a requirement to display the legend name along with its corresponding color in the tooltip text for each series in the chart. I've tried several approaches, including customizing the tooltip function, but I'm encountering difficulties in achieving the desired result.

` series.columns.template.set("tooltipHTML", am5.Tooltip.new(root, {
        tooltipHTML: function(dataItem) {
            var seriesName = dataItem.series.name;
            var color = dataItem.series.fill.hex;
            var valueX = dataItem.categoryX;
            var valueY = dataItem.valueY;
            var seriesColorBox = '<span style="display:inline-block; width:12px; height:12px; background-color:' + color + '; margin-right: 5px;"></span>';
            return valueX + ', Number of appointments<br>' +
                'Total: ' + valueY + '<br>' +
                seriesColorBox +
                '<span style="color: black;">' + seriesName + ': ' + valueY + '</span><br>';
        }
    }));`

Despite trying this approach and others, I'm not achieving the desired outcome. The tooltip text is not displaying the legend name and color correctly.

Any insights or suggestions on how to resolve this issue and correctly display the legend colors in the tooltip text would be greatly appreciated!