How to use angular ngx-translate pipe in ngx-charts?

Question

I want to add pipeline to my ngx-chart xAxisLabel and yAxisLabel.

<ngx-charts-bar-vertical
              [view]="view"
              [scheme]="colorScheme"
              [results]="single"
              [gradient]="gradient"
              [xAxis]="showXAxis"
              [yAxis]="showYAxis"
              [legend]="showLegend"
              [showXAxisLabel]="showXAxisLabel"
              [showYAxisLabel]="showYAxisLabel"
              [xAxisLabel]="xAxisLabel"
              [yAxisLabel]="yAxisLabel"
              (select)="onSelect($event)">
</ngx-charts-bar-vertical>

The code I changed below caused an error.

[showXAxisLabel] = {{ 'xAxisLabel' | translate }}

Error:

Error in /turbo_modules/@angular/compiler@8.2.14/bundles/compiler.umd.js (2603:21)

Stackblitz

How could I achieve ngx-translate pipe with ngx-charts?

Answer 1

Credited to @Amer's comment, the syntax for using translate pipe was wrong. Have to be:

[xAxisLabel]="'xAxisLabel' | translate"

OR

xAxisLabel="{{'xAxisLabel' | translate}}"

And according to ngx-charts Vertical Bar Chart,

Property	Type	Description
showXAxisLabel	boolean	show or hide the x axis label
showYAxisLabel	boolean	show or hide the y axis label
xAxisLabel	string	the x axis label text
yAxisLabel	string	the y axis label text

You need to assign the text with translate pipe to [xAxisLabel] and [yAxisLabel],

but not [showXAxisLabel] and [showYAxisLabel].

<ngx-charts-bar-vertical 
  [xAxisLabel]="'xAxisLabel' | translate" 
  [yAxisLabel]="'yAxisLabel' | translate">
</ngx-charts-bar-vertical>

Sample Solution on StackBliz