ngx-charts-bar-horizontal data label formatting

1
votes

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

3
angulartypescriptchartsngx-bootstrapngx-charts

3 Answers

5
votes

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 + '%';
  }
0
votes

I found a solution using querySelector and innerHTML like that:

 document.querySelectorAll(text.textDataLabel).innerHTML += '%';
0
votes

You need this param [yAxisTickFormatting] and function like this in .ts file:

chart.component.ts

  percentTickFormatting(val: any) {
    return val.toLocaleString() + '%';
  }

chart.component.html

<ngx-charts-bar-vertical
  [view]="view"
  [results]="chartData"
  [xAxis]="true"
  [yAxis]="true"
  [legend]="true"
  [showXAxisLabel]="true"
  [showYAxisLabel]="true"
  [yAxisTickFormatting]="percentTickFormatting"
>
</ngx-charts-bar-vertical>