CODEWITHSUNDEEP
angularangular-pipengx-translateangular-i18n
Alan Yu
Alan Yu

Reputation: 1542

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

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/[email protected]/bundles/compiler.umd.js (2603:21)

Stackblitz

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

Upvotes: 0

Views: 862

Answers (1)

Yong Shun
Yong Shun

Reputation: 51325

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

Upvotes: 1

Related Questions