CentralLabel showing on left of gauge

[lagc03]

Any hints on why the central label is showing at the left of the chart intead of in the inner middle?

Here is some of my code: <mat-card class="summary-box"> <mat-card-header> <mat-card-title>{{ specification.caption }}</mat-card-title> <mat-card-subtitle> {{ specification.subcaption }}</mat-card-subtitle> </mat-card-header> <mat-card-content> <rg-gauge-chart [canvasWidth]= 500 [nameFont] = 20 [needleValue]="specification.widget.needleValue" [bottomLabelFont] = 18 [centralLabel] = 70 [options]="options" ></rg-gauge-chart> <small>70% = {{(specification.widget.bottomLabel | number) + ' ' + specification.units}}</small><br> <small>AVG = Elephant Butte Storage Calendar Year Average (1964-2013)</small> </mat-card-content> </mat-card>

CSS:

`.metadata-box{ margin: 25px 10px 25px 10px; }

mat-card { display: flex; flex-grow: 1; }

mat-card-content { margin-left: 15px; flex-grow: 1; }

.description{ font-size: 16px; }`

[andrea-colleoni]

x attribute in text element of the SVG is actually NaN when using centralLabel Have you solved this Luis?

[bastifix]

Same problem here: With centralLabel it works fine, but with [centralLabel] it's on the left and I get

[lagc03]

I ended up using the bottomLabel instead and leaving the central as an empty string. My component is setup like so now:

<rg-gauge-chart *ngIf="specification.widget.type === 'fill-percent-gauge' && plotVisible === true" [canvasWidth]="canvasWidth" [nameFont]="nameFont" [centralLabel]="centralLabel" [needleValue]="specification.widget.needleValue" [bottomLabelFont]="bottomLabelFont" [bottomLabel]="bottomLabel" [options]="options" ></rg-gauge-chart>

Which looks like this: