Add X-Axis label click event on Angular 2 Highcharts

Question

I'm having difficulty hand-rolling a solution involving adding a click listener to an X-Axis label (specifically a column chart) from the HighCharts API, specifically within an Angular 2+ application.

I know the following thus far:

I'm using angular2-highcharts to perform these charting illustrations in an Angular fashion.
By design, HighCharts API removed X-Axis click events for security reasons.
A customEvents plugin does exist to add custom events such as this.

The problem:

In short, I'd like to add a click event to a label element and attach it to a method defined inside of an Angular component. However, I can't do this through normal means such as leveraging jQuery or native JavaScript to add an event listener on an element because of that very issue - the method I want is in Angular's world.

In an ideal world I'd like to do this (however, the wrapper does not provide this current opportunity):

<xAxis (click)="onClick($event)"></xAxis>

And I've been playing around with implementations such as (not working as onClick is defined as a method inside of an Angular component):

$('#label-0').on('click', this.onClick(e));

I will continue to update this question with more details - please stay tuned.

score 1 · Answer 1 · answered May 16 '18 at 20:56

So this was my final solution which works the way I expect it to. I'm posting it on here in case anyone goes down a similar rabbit hole.

I'm still leveraging:

angular2-highcharts
HighCharts

But not the customEvents.js plugin I spoke of earlier.

I've honored this out-of-box functionality in full from the Angular wrapper:

<xAxis (afterSetExtremes)="onAfterSetExtremesX($event)"></xAxis>

Inside of my respective Angular component, I've set a public method as follows:

public onAfterSetExtremesX (e: any) {
    // I need context to this very component so I can bridge
    // between Angular objects and classic jQuery techniques.
    let self = this;

    // Let's cherry-pick all WEEKLY record data from Highcharts setup.
    let chartEvent0 = e.context.categories[0];
    let chartEvent1 = e.context.categories[1];
    let chartEvent2 = e.context.categories[2];
    let chartEvent3 = e.context.categories[3];
    let chartEvent4 = e.context.categories[4];
    let chartEvent5 = e.context.categories[5];
    let chartEvent6 = e.context.categories[6];

    // Attach a click for these highcharts labels to invoke the component's method.
    $('#label-single-0, #label-multiple-0').on('click', function(){
        self.childModal.showModal(chartEvent0);
    });
    $('#label-single-1, #label-multiple-1').on('click', function(){
        self.childModal.showModal(chartEvent1);
    });
    $('#label-single-2, #label-multiple-2').on('click', function(){
        self.childModal.showModal(chartEvent2);
    });
    $('#label-single-3, #label-multiple-3').on('click', function(){
        self.childModal.showModal(chartEvent3);
    });
    $('#label-single-4, #label-multiple-4').on('click', function(){
        self.childModal.showModal(chartEvent4);
    });
    $('#label-single-5, #label-multiple-5').on('click', function(){
        self.childModal.showModal(chartEvent5);
    });
    $('#label-single-6, #label-multiple-6').on('click', function(){
        self.childModal.showModal(chartEvent6);
    });
}

jQuery can select the HTML elements because they are finally drawn into the Axis Context and I bridge that back to a locally scoped variable called self - which is a reference to this which accounts for the Angular objects defined in that very component.

Add X-Axis label click event on Angular 2 Highcharts

1 Answers1