Using TypeScript to pass a callback function to labelFormatter in the legend of a Highcharts chart

Question

Using TypeScript to pass a callback function to labelFormatter in the legend of a Highcharts chart

I am currently experimenting with integrating HighCharts into an Angular2 project using TypeScript.

My goal is to customize the appearance of the legend text, adding an image next to it. I've found that HighCharts provides a labelFormatter property within the legend section for this purpose.

http://api.highcharts.com/highcharts#legend.labelFormatter

The labelFormatter function allows you to modify the format of each series' labels. When used, 'this' refers to either the series object or, in the case of pie charts, the point object. By default, the series or point name is displayed.

However, I'm struggling to figure out how to pass a callback function from TypeScript to the labelFormatter property.

updateChart(): void {
    let newOptions = {
        legend: {
            useHTML: true,
            itemMarginBottom: 10,
            enabled: true,
            floating: true,
            align: 'center',
            verticalAlign: 'top',
            labelFormatter: (s) => this.getLegendLabel(s),
            y: 35
       }
    }
}

getLegendLabel(seriesDetails) {
    console.log(seriesDetails);
}

When executing this code, I am encountering an issue where the seriesDetails object is returning as undefined.

Additionally, whenever I use the this keyword, it references the component itself rather than the series information.

highcharts typescript angular callback highcharts-ng

Answer 1

Answer №1

As stated in the details provided by the official documentation:

The callback function is used to format each label of the series. The keyword "this" refers to either the series object or the point object in the case of pie charts. By default, the name of the series or point is displayed.

It appears that there might be an issue with how you are using "this" in the fat arrow function. In my opinion, the easiest solution would be to simply adhere to the syntax outlined in the documentation (jsfiddle):

labelFormatter: function () {
    return this.name + ' (click to hide)';
}

Answer 2

As stated in the details provided by the official documentation:

The callback function is used to format each label of the series. The keyword "this" refers to either the series object or the point object in the case of pie charts. By default, the name of the series or point is displayed.

It appears that there might be an issue with how you are using "this" in the fat arrow function. In my opinion, the easiest solution would be to simply adhere to the syntax outlined in the documentation (jsfiddle):

labelFormatter: function () {
    return this.name + ' (click to hide)';
}

Answer 3

Answer №2

When writing your code, make sure to follow this structure:

updateChart(): void {
    let newOptions = {
        legend: {
            useHTML: true,
            itemMarginBottom: 10,
            enabled: true,
            floating: true,
            align: 'center',
            verticalAlign: 'top',
            labelFormatter: this.getLegendLabel,
            y: 35
       }
    }
}

getLegendLabel() {
    console.log(this);
}

By implementing the above code, you will generate the following JavaScript code that functions correctly within the specified class name ('Test'):

Test.prototype.updateChart = function () {
    var newOptions = {
        legend: {
            useHTML: true,
            itemMarginBottom: 10,
            enabled: true,
            floating: true,
            align: 'center',
            verticalAlign: 'top',
            labelFormatter: this.getLegendLabel,
            y: 35
        }
    };
};
Test.prototype.getLegendLabel = function () {
    console.log(this);
};

Answer 4

When writing your code, make sure to follow this structure:

updateChart(): void {
    let newOptions = {
        legend: {
            useHTML: true,
            itemMarginBottom: 10,
            enabled: true,
            floating: true,
            align: 'center',
            verticalAlign: 'top',
            labelFormatter: this.getLegendLabel,
            y: 35
       }
    }
}

getLegendLabel() {
    console.log(this);
}

By implementing the above code, you will generate the following JavaScript code that functions correctly within the specified class name ('Test'):

Test.prototype.updateChart = function () {
    var newOptions = {
        legend: {
            useHTML: true,
            itemMarginBottom: 10,
            enabled: true,
            floating: true,
            align: 'center',
            verticalAlign: 'top',
            labelFormatter: this.getLegendLabel,
            y: 35
        }
    };
};
Test.prototype.getLegendLabel = function () {
    console.log(this);
};

Using TypeScript to pass a callback function to labelFormatter in the legend of a Highcharts chart

Answer №1

Answer №2

Similar questions

Error encountered: Uncaught SyntaxError - An unexpected token '<' was found while matching all routes within the Next.js middleware

Set the component variable to hold the output of an asynchronous method within a service

Exploring Angular Material's Autocomplete feature and staying updated with incoming data changes

Issue with res.redirect not properly redirecting to https site

determine the appropriate month for the calendar month component based on the route selected

Ways to verify if a function has completed execution and proceed to invoke another function

Replacing the previous observation

Guide on how to use window.resize subscription in an Angular service?

Tips for targeting a specific element with providers in Ionic

Testing event handling in CdkDragDrop functionality

What is the proper way to conduct unit testing on a function that is invoked in a service's constructor

Choosing an SVG Circle Using TypeScript

CSS styling is not being applied to buttons within Ionic 2

Angular has a built-in function to determine the next ID after deletion of some items

Encountering issues while trying to update npm in a Angular 6 project

Adjust the setting for the useHash parameter within the RouterModule during execution

Angular 7 - Personalized Name for Formbuilder's Dynamic Form

What is the method for showcasing a single Observable from an Array of Observables in Angular?

The parameter type 'IScriptEditorProps' does not accept arguments of type 'string'

Using TypeScript: Functions incorporating properties