[Chartjs]-How can I use the locale service provided by Angular to set the tooltip label in Chart.js when using the tooltip call function?

by

1👍

✅

If you are sure that this is the application when the config object is created, then you can use something on lines of

tooltip: {
    callbacks: {
        label: (function(){
            const _this = this;
            return function(context){ // use _this.locale here
                var bar = JSON.parse(context.formattedValue);
                var label = [];
                if(bar){
                    var l = _this.locale;
                    const diff = Number.parseFloat(bar[1]) - Number.parseFloat(bar[0]);
                    label.push('Difference: ' + formatNumber(diff, 'en-US', '1.0-0'));
                    label.push('Start: ' + formatNumber(bar[0], 'en-US', '1.0-0'));
                    label.push('End: ' + formatNumber(bar[1], 'en-US', '1.0-0'));
                }
                return label;
            };
        })()
    }
}

or you can even bind the function to the outer this, as long as you don’t get used to this method, because in general one has to be very careful when binding a method to a foreign object:

   tooltip: {
        callbacks: {
            label: function(context){
            //......... // use this.locale
            }.bind(this) // better avoid this
        }
    }

and a third option would be to use an arrow function, which inherits this from the outer scope:

   tooltip: {
        callbacks: {
            label: (context) => {
                //......... // use this.locale
                return label;
            }
        }
    }

Leave a comment