Chart.js – как добавить значок (или собственный html-код) в элемент легенды? ⇐ Javascript

[Anonymous]

У меня есть кольцевая диаграмма с данными по странам. Я хочу, чтобы значок страны отображался в легенде перед названием страны. Например, что я хочу увидеть:


Я пробовал использовать обратный вызов GenerateLabels, но он отображает HTML-код в виде текста.


https://codepen.io/artem919191/pen/QwEGQWY?editors=1010
Конфигурация диаграммы:
const countriesChartConfig = {
type: 'doughnut',
//type: 'pie',
data: countriesData,
options: {
plugins: {
legend: {
position: 'right',
labels: {
//generateLabels: pieGenerateLabelsFunc
generateLabels: function(chart) {
return chart.data.labels.
map(function (label, i) {
//console.log(chart.data.datasets[0].data);
let backgroundColor = chart.data.
datasets[0].backgroundColor;
let count = chart.data.datasets[0].data;
let total = 0;
let dataArr = chart.data.datasets[0].data;
dataArr.map(data => {
total += data;
});
let percent = (count / total) * 100;
country_code = chart.data.datasets[0].data.country_code;
return {
text: flag(country_code) + ' ' + label + ' - ' + count + ' (' + percent.toFixed(2) + '%)',
fillStyle: backgroundColor
};
});
}
}
}
},
animation: false,
maintainAspectRatio: false,
parsing: {
key: 'count'
}
}
};


Подробнее здесь: https://stackoverflow.com/questions/798 ... egend-item