Используйте html-теги в chartdata.labels с помощью chart.js jquery

Question

Я пытаюсь показать значки icomoon на ярлыках chartjs, но не могу этого сделать. если я использую html, он возвращает его как обычный текст.

https://jsfiddle.net/moviecrew/1sxhjzvo/6/ - вот скрипка, над которой я работал. Я попытался сделать что-то вроде этого:

var socialMetLabel = ["<span class='icon-facebook'></span>", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""];

и параметр диаграммы, как это:

data: {
        labels: socialMetLabel.slice(0, socialMetDisplayCount),
        // fontFamily: "'icomoon-font-tab', sans-serif",
        datasets: [{
            // label: false,
            data: socialMetData.slice(0, socialMetDisplayCount),
            backgroundColor: 'rgba(60, 143, 154, 0.16)',
            // backgroundColor: 'rgba(12, 125, 174, 0.2)',
            hoverBackgroundColor: 'rgba(60, 143, 154, 0.26)',
            borderWidth: 0,
            datalabels: {
                color: '#384354',
                font: {
                    family: '"Open Sans", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
                    size: 18,
                    weight: 'bold'
                },
                // clamp: true,
                anchor: 'end',
                align: 'end',
                // fontSize: '18px',
                // fontWeight: 'bold',
            }
        }]
    },

    // Configuration options go here
    options: {

        responsive: true,
        maintainAspectRatio: false,

        legend: {
          // display: chkLegend,
          display: false,
        },

        title: {
          display: false,
          text: 'Total leads vs Referred vs Direct leads',
        },

        tooltips: {
            enabled: false,
        },

        scales: {
          xAxes: [{
            barPercentage: 0.8,
            categoryPercentage: 0.8,
            gridLines: {
                display: true,
                color: 'rgba(0,0,0,0.1)',
                drawBorder: false,
                zeroLineColor: 'rgba(0,0,0,0.1)'
            },
            ticks: {
                min: 0,
                max: 200,
                stepSize: 25,
                fontFamily: '"Open Sans", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
                fontSize: 12,
                fontColor: '#AFB4BB',
                padding: 10
            },
            scaleLabel: {
                display: true,
                labelString: 'Number of views',
                fontFamily: '"Open Sans", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
                fontSize: 12,
                // fontStyle: '300',
                fontColor: '#AFB4BB',
                padding: 10,
            }
          }],
          yAxes: [{
            categoryPercentage: 0.56,
            barPercentage: 1.0,
            gridLines: {
              display: false,
              color: 'rgba(0,0,0,0.1)',
              drawBorder: false,
            },
            ticks: {
                fontFamily: 'icomoon',
                fontSize: 20,
                fontColor: '#384354',
                padding: 25,
                // callback: function(value, index, values) {
                //     return  + value + '</em>';
                // }
            }
          }],
        },
    }

это работает нормально, если я использую символ. Это идет отсюда https://tppr.me/3iyib, но, делая это, становится трудно сделать его динамичным и трудно распознать, что это за иконка, что будет позже.

, так что нет ли способа заставить его работать, используя либоиз них 3, <span class="icon-facebook"></span> или  или "\e95d" это. Это все, что вы можете увидеть на скриншоте, которым я поделился.