0

How can I make my xAxis labels links to other parts of my app with routerLink directive?

Say:

xAxis: {
      categories: [{
        name: 'Yanick',
        id: '1'
      }, {
        name: 'Mathieu',
        id: '2'
      }, {
        name: 'Bob',
        id: '3'
      }, {
        name: 'Richard',
        id: '4'
      }, {
        name: 'Linda',
        id: '5'
        }],
      labels: {
        formatter: function(){
          return '<a href="' + 'http://localhost:4200/employee/' +  this.value.id + '">' + this.value.name + '</a>';
        },
        useHTML: true
      }
    },

I want to be able to navigate to a specific employee page by clicking on one of the x axis label. It works with the href="". So far so good, but I want to use the Directive routerLink instead of href. To do so i'd need to do something like this:

labels: {
        formatter: function(){
          return '<a [routerLink]="['+ '/employee' +', '+ this.value.id +']">' + this.value.name + '</a>';
        },
        useHTML: true
      }
    },

But when I click on one of the labels nothing is happening... Any idea why? How to fix this? Is it even possible to use a directive in the formatter function? Should I try another approach?

thanks for the answers!

Marcel Jr. Samson Morasse
  • 547
  • 2
  • 8
  • 25
  • 1
    It wont work because in the formatter callback you return string which is appended to the DOM by Highcharts - basically, it bypasses angular infrastructure. If you are familiar with angularjs (1.x) - you would need sth like $compile to compile the DOM element (tooltip) after it is appended. It can be achieved pretty easily in angular 1, unfortunately in angular this process gets complicated - see the answer https://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2 – morganfree Jul 12 '17 at 11:57
  • wow...this is clearly way too complicated. Thanks for the answer, ill try to find another way. – Marcel Jr. Samson Morasse Jul 12 '17 at 17:04

0 Answers0