Highcharts - Unable to call onclick function on label which created in formatter

Question

I have created Highchart and added custom xAxis labels on it. The custom labels are hyperlinked and need to handle onclick event on it. Please check the below code of Highchart creation.

Formatter code ->

labels: {  
      enabled: true,        
      formatter: function() {
        var txn = JSON.parse(this.value);            
        if (!txn || !txn.txnType) {
          return this.value;
        }
        var mvmtLink = '<a classname="x_axis_mvmt_no" >' + txn.no + '</a>';
        return mvmtLink;
      },
      useHTML: true,
    },

Whole Code ->

Highcharts.AST.allowedAttributes.push('onclick', 'classname');
this.assetsByDelay = {
  title: {
    text: null,
  },
  credits: {
    enabled: false,
  },
  chart: {
    styledMode: true,
    className: 'assets-by-delay-chart',
    marginRight: 100,
    labels: {
      useHTML: true,
    },
  },

  plotOptions: {
    series: {
      states: {
        hover: {
          enabled: false,
        },
      },
      zones: [{
        className: 'default',
      }],
    },
    bar: {
      pointWidth: 2,
    },
    scatter: {
      dataLabels: {
        enabled: true,
        crop: false,
        x: 40,
        y: 10,
        overflow: 'none',
        formatter: function() {
          return this.point.options.visibleValue - shift;
        },
      },

    },
  },
  tooltip: {
    enabled: false,
  },

  xAxis: {
    type: 'category',
    title: {
      text: Labels.get('Meta.RTTEP.Movements'),
    },
    labels: {  
      enabled: true,        
      formatter: function() {
        var txn = JSON.parse(this.value);            
        if (!txn || !txn.txnType) {
          return this.value;
        }
        var mvmtLink = '<a classname="x_axis_mvmt_no" >' + txn.no + '</a>';
        return mvmtLink;
      },
      useHTML: true,
    },
    min: 0,
    max: 9,
    gridLineWidth: 1,
    tickmarkPlacement: 'on',
    scrollbar: {
      enabled: true,
    },
    tickLength: 0,
  },

  yAxis: {
    title: {
      text: Labels.get('meta.label.RTTEP.RemainingDays'),
      align: 'high',
    },
    tickInterval: 10,
    gridLineColor: 'transparent',
    allowDecimals: false,
    labels: {
      //step: 1,
      enabled: true,
      useHTML: true,
    },
    plotLines: [{
      className: 'zero-percent-line',
      value: shift,
    }],
  },
  labels: {
    useHTML: true,
  },          
  series: [{
    type: 'bar',
    colorByPoint: true,
    data: [],
    showInLegend: false,
    useHTML: true,
  },
  {
    type: 'scatter',
    colorByPoint: true,
    data: [],
    showInLegend: false,
    keys: ['movement', 'y', 'type', 'visibleValue'],
    marker: {
      symbol: 'this property required to be set',
      fontAwesomeConfig: {
        symbol: 'text:\uf0d1',
        customizeFn: function(svgElem, x, y, w, h, options) {
          return svgElem.attr({
            translateY: h - 23,
            translateX: 0,
            rotate: 90,
          })
            .css({
              fontFamily: '"Font Awesome 5 Free"',
              fontSize: '14px',
              'font-weight': 900,
            });
        },
      },
    },
  }],

};

As shown, I have added formatter for xAxis labels and shown text as hyperlink but unable to achieve onclick event on it. I tried the below solutions but they didn't work -

1. Added onclick event in anchor tag.

2. Added click event on labels of x-axis but it is not working on click of custom label, it works after clicking on the axis of the chart. Hence unable to achieve the target.

3. Added load event on chart so can access the axis labels but it didn't work.

4. Used the below solution but formatter gets called at last every time so this soution is also not working. Click event not fire in highcharts tooltip

Can someone please help to provide the solution to register and call onclick event on custom axis labels of Highcharts.

 if (document.getElementsByClassName('.x_axis_mvmt_no').length > 0) {
            document.getElementsByClassName('.x_axis_mvmt_no').click(function () {
              console.log(this);
            });
          }

Answer 1

First of all, you don't need to add classname to allowed AST attributes. The class attribute is allowed by default.

Highcharts.AST.allowedAttributes.push('onclick');

---

Events can be added in the both suggested ways. Thorough inline attribute:

  xAxis: {
    type: 'category',
    labels: {
      useHTML: true,
      formatter: function() {
        return this.value + ' <a onclick="..." class="x_axis_mvmt_no">Link</a>'
      }
    }
  }

---

And by using class name:

const labels = document.getElementsByClassName('x_axis_mvmt_no');

[...labels].forEach(label => {
  label.addEventListener('click', () => {
    console.log('label clicked');
  });
});

---

Live demo: http://jsfiddle.net/BlackLabel/6tqms7w4/