How to insert HTML inside an Ext.each() in the labeFormatter function of legend-EXTJS -highcharts - extjs

Question

I was referring to the Highcharts doc but I don't quite understand how to add an HTMl inside an EXT js loop inside the labelFormatter func.
Here is the code:
getLegendConfig: function() {
var ct = this;
return {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: -25,
y: 25,
borderWidth: 0,
floating: type === 'column',
itemMarginBottom: 5,
labelFormatter: function() {
var count = this.y || 0;
Ext.each(ct.data.series, function(ct) {
ct.data.map(function(pt) {
if (pt !== null) {
return [
'<div>',
Ext.util.Format.ellipsis("some name", 48),
'<span class="qx-highchart-legend-item-count">',
Ext.util.Format.number(pt.count, '0,000'),
'</span>',
'</div>'
].join('');
}
})
});
},
useHTML: true
};
}.createDelegate(this)
With the above code, nothing gets populated inside the element, not sure how to get this running. Any ideas?
Here is the fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/2k5v
Thanks

Answer 1

Since you do not have in your fiddle the actual highchart but only the getLegendConfig portion it would be tricky to give exact answer. However this goes back to the previous question you asked about the panel with values. So this is a similar example where the values are rendered on a panel: https://fiddle.sencha.com/#view/editor&fiddle/2k60
Here is the main part:
series.map((x) => {
return x.data.map(function(pt) {
if (pt !== null) {
return [
'<div>',
Ext.util.Format.ellipsis("name", 48),
'<span class="qx-highchart-legend-item-count">',
Ext.util.Format.number(pt.count, '0,000'),
'</span>',
'</div>'
].join('');
}
})
}),
You have to compose that with your code and see if you get the output you want. Based on the example I gave above this will render on a simple panel the values you wanted so it should be working with your pieces. Let me know how it goes.