Highcharts Tooltip not rendering properly if it has material icons

Question

In my rails application I have a graph with icons generated with Highcharts. The icons are Google Material design icons that I get through a material-icons gem. https://github.com/Angelmmiguel/material_icons.

I want to do 2 things with the icons:

1. Instead of numeric labels I want smileys. This I got working

   yAxis: {
           max: 5,
           min: 1,
           labels: {
               formatter: function () {
                   if (this.value == 1) {
                       return '<i class="material-icons">sentiment_very_dissatisfied</i>'
                   }
                   if (this.value == 2) {
                       return '<i class="materialicons">sentiment_dissatisfied</i>'
                   }
                   if (this.value == 3) {
                       return '<i class="material-icons" height="5px">sentiment_neutral</i>'
                   }
                   if (this.value == 4) {
                       return '<i class="material-icons">sentiment_satisfied</i>'
                   }
                   if (this.value == 5) {
                       return '<i class="material-icons">sentiment_very_satisfied</i>'
                   } else {
                       return this.value
                   }
               }
           }
       },
   

   

2. Instead of numeric values in the tooltip I want smileys. This is where it goes wrong.

   tooltip: {
           formatter: function () {
               var date = Highcharts.dateFormat('%d-%m-%y %H:%M',
                   new Date(this.x));
               var getIcon = function (y) {
                   if (y == 1) {
                       return '<i class="material-icons">sentiment_very_dissatisfied</i>'
                   }
                   if (y == 2) {
                       return '<i class="material-icons">sentiment_dissatisfied</i>'
                   }
                   if (y == 3) {
                       return '<i class="material-icons">sentiment_neutral</i>'
                   }
                   if (y == 4) {
                       return '<i class="material-icons">sentiment_satisfied</i>'
                   }
                   if (y == 5) {
                       return '<i class="material-icons">sentiment_very_satisfied</i>'
                   } else {
                       return y
                   }
               };
               var icon = getIcon(this.y);
               console.log(date);
               return '<b>' + this.series.name + '</b><br/>' + date + ' : ' + icon;
           },
   

   I have to parse the date because it is a JavaScript epoch time(milliseconds). Without + icon the date is shown. If I add + icon it doesn't work and the date will not correctly render. What I noticed is that the icon is higher than the line itself. So I think this is a CSS problem, but I don't know how to fix it.
   Without:With:

Thanks in advance for replying!

Answer 1

For using HTML in a tooltip, enable tooltip.useHTML property.

 tooltip: {
        useHTML: true

Also, the data must be sorted in ascending order, otherwise undesired graphical shapes might occur in a chart.