ngx-charts-bar-horizontal data label formatting

Question

I'm using ngx-charts more exactly bar-horizontal. What I'm trying to do is to format data label and add % at the end. I have tried to use [xAxisTickFormatting] but it doesn't work because, from what I noticed, my values are not on ngx-charts-x-axis but on ngx-charts-series-horizontal.

ngx-charts used as bellow:

<ngx-charts-bar-horizontal 
*ngIf='givesEnergyChartData && givesEnergyDataColorScheme'  
[scheme]="givesEnergyDataColorScheme"
[results]="givesEnergyChartData"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[view]="viewGiveEnergy"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[showDataLabel]="showDataLabel">
</ngx-charts-bar-horizontal>

Also I have tried to format on data array (I know it was stupid, but I have tried:) )

this.givesEnergyChartData = this.statistic.givesEnergyData.map(
 s => {
   return { name: s.name, value: s.count } 
 });

by adding for value: s.count + '%'.

So, what should I do to format the data labels and add '%' after values?

here is my chart

Answer 1

Try this.

<ngx-charts-bar-horizontal 
*ngIf='givesEnergyChartData && givesEnergyDataColorScheme'  
[scheme]="givesEnergyDataColorScheme"
[results]="givesEnergyChartData"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[view]="viewGiveEnergy"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
  [dataLabelFormatting] = "formatDataLabel"
[showDataLabel]="showDataLabel">
</ngx-charts-bar-horizontal>

and

  formatDataLabel(value )
  {
    return value + '%';
  }