Ngx-charts: Custom formatting for values

[marjan-georgiev]

Allow specifying custom date formatting via input properties on the charts.

This would allow us to specify the representation of numbers and dates, as well as add prefixes and suffixes to their string representations in axis labels, legends, and tooltips.

[emoralesb05]

This would be awesome since sometimes we need to represent big numbers as 8M or 79K in the axis labels BUT have the full value show in tooltips.

[marjan-georgiev]

We added xAxisTickFormatting and yAxisTickFormatting inputs to all charts that have X and Y axis.

They accept a function, in which you can return a string that will be displayed in place of the axis tick label.

If you want to hide a label, just return an empty string.

Example:

axisFormat(val) {
  return '$' + val.toLocaleString(); 
}

This will come with the next release.

[austindick]

Is there an example of this I can use for reference?

[salcio]

And how can we apply the same formatting to tooltip and line-chart line label

[BoJIbFbI4]

waiting for some example;
I need to use full time (DD-MM-YY, hh:mm:ss') formatting, but for xAxis I need (DD-MM) formatting.

[shral]

Hi @marjan-georgiev ,
thank you for the great work! I was trying to use the feature but my formating should depend on one variable state in my component. I see that this of my component is not available, rather this of ngx-chart, any Idea how can I access my this in the formating function?
Best Regard
Shefki

[amrit-kumar]

@shral use the following
[xAxisTickFormatting]="xAxisTickFormatting.bind(this)"

[shral]

@amrit-kumar thank you for the idea! It seams to slow down my Application a lot and disturbs the behavior of ngx-charts, if I use bind. What's working for me (but I don't like mouch this solution) is declaring some global variable (outside of the component class) and use that to save this of my component.

[amrit-kumar]

@shral Do it as follows:
in your component:
```
public yAxisTickFormattingFn = this.yAxisTickFormatting.bind(this);
public xAxisTickFormattingFn = this.xAxisTickFormatting.bind(this);

yAxisTickFormatting(value) {
}
xAxisTickFormatting(value) {
}

and in your html:

[xAxisTickFormatting]="xAxisTickFormattingFn"
[yAxisTickFormatting]="yAxisTickFormattingFn"
```

[Niaro]

@shral I believe the approach below is prettier of all the examples given above

class SomeComponent {
    xAxisTickFormatting = value => `X ${value.toLocaleString()}`;
    yAxisTickFormatting = value => `Y ${value.toLocaleString()}`;
}

[shral]

@Niaro using arrow function is a very good Idea, thank you!

For the people that want to know my end solution of my previous question (making the formating conditional ) thanks to @Niaro suggestion:

xAxisTickFormatting = (val)=>{
     if(this.condition){
         return this.format(val);
     }
     return val;
}

[Niaro]

@shral You are welcome!

[amrit-kumar]

can I have custom DataLabel template as i want to show percentage value of all data for each chart in DataLabel .

[ahmadnazih]

Is there a way to customize the data labels (eg: make it percentage instead of just numbers) ?