Ngx-charts: dataLabelFormatting - use variables from the component

[Abdullah0991]

Hi, using dataLabelFormatting property, I want to add additional data beside the original value of the bar.

I want to add the percent of the bar value, but for that I need the total of the values of the bars.

So I was using the dataLabelFormatting property like this:
[dataLabelFormatting] = "formatDataLabel"
and

public formatDataLabel(value) {
    return `${value}km²`
};

But now for the percent I changed the code to this:

public formatDataLabel(value) {
    return `${value}km² (${((value * 100) / this.total).toFixed(2) + '%'})`
};

and the template like this:
[dataLabelFormatting] = "formatDataLabel.bind(this)"

Now when I try the code, everything working fine but the browser start to lag and freeze. As I think the template change is the problem.

So, Is there a solution for the lag and freeze problem, or another solution to add the percent besides the bar value?

I use Angular 7 with version 11.1.0 of ngx-charts.

[marjan-georgiev]

You need to bind your function inside the component. Binding it in the template will cause performance issues because the binding is evaluated on every change detection cycle.

in component:

this.boundFormatDataLabel = this.formatDataLabel.bind(this);

in template:

[dataLabelFormatting] = "boundFormatDataLabel"

[blogcraft]

there is no dataLabelFormatting in ngx-charts-line-chart 😕