Highcarts, removes html on categories

So I have this issue where i pass in categories with html, but if I send in

<a href="javascript:void(0)">foo</a>

the only thing that comes out is

<a>foo</a>

Does anyone know why this happens? Here is the code for the highchart. This has worked before and I haven’t changed anything that I can remember. These are all the details I have to post. How many more details do you need?

   var test1 = Highcharts.chart('zoneChart', {
    chart: {
        type: 'bar',
      height: 600
    },
    title: {
        text: ''
    },
    xAxis: {
      categories: categories,
      labels: {
        useHTML: true,
      }
    },
    yAxis: {
        min: 0,
      max: 100,
        title: {
            text: null
        }
    },
    tooltip: {
        valueSuffix: '%',
      formatter:function(){
            var deviation = this.point.series.options.avvik;
                var app = this.x;
                var name = this.point.series.name;
                var value = this.point.y
                var html = this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.y,0,',','.') + '%</b><br/>';
               $.each(deviation, function(i, item) {
                  /*<![CDATA[*/
                  if(item.key == app && item.avvik > 0) {
                  /*]]>*/
                        
                     html = name + ': <b>' + Highcharts.numberFormat(value,0,',','.') + '%</b><br/><br />Har '+item.avvik+' avvik!';
                }
               })
   
               return html;
        }
    },
    credits: {
      enabled: true,
    },
    legend: {
      enabled: false,
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
               overflow: 'none',
               crop: false,
                useHtml: true
            }
        },
        series: {
            stacking: 'normal',
            dataLabels: {
                        useHTML:true,
                        enabled: true,
                        color: '#FFFFFF',
                        align: 'right',
                                            enabled: true,
              overflow: 'none',
              crop: false,
                            y: -10,
                        formatter: function(){
                                 var app = this.x;
                                 var html = '';
                                 $.each(this.series.options.avvik, function(i, item) {
                                    /*<![CDATA[*/
                                    if(item.key == app && item.avvik > 0) {
                                        /*]]>*/
                                        html = '<img style="padding: 5px;" src="/css/icons/32/error.png" />';
                                        }
                                 })
                                 
                            return html;
                        }
                    }
   }
   },
    credits: {
        enabled: false
    },
    series: [seriesObject]
});

Answer

That behaviour was introduced in Highcharts 9 and it is intended. You can separate the click handlers from the config.

Highcharts.addEvent(Highcharts.Chart, 'load', e => {
  [...e.target.renderTo.querySelectorAll('a.alerter')].forEach(
    a => a.onclick = function () { alert(a.innerHTML); }
  );
});

Live demo: https://codepen.io/TorsteinHonsi/pen/RwoWPqd

Please check this github issue: https://github.com/highcharts/highcharts/issues/15031 for more information.

Advertisement

Answer