angular - angular4でキャンバスをレンダリングする方法

Question

angular4およびng2チャートを使用しています。ドーナツ チャートのキャンバス センター内にテキストを表示する必要があります。Angular4 キャンバスは初めてです。

Here is my app.component:

    export class AppComponent {

      @ViewChild("layout") layout: ElementRef; 


      ngAfterViewInit() {

        let canvas = this.layout.nativeElement;

        let context: CanvasRenderingContext2D = this.layout.nativeElement.getContext("2d");
        var x = canvas.width / 2;
        var y = canvas.height / 2;

        context.font = '90pt Calibri';
        context.textAlign = 'center';
        context.fillStyle = 'blue';
        context.fillText('Hello Worldetrereygerhg!', x, y);

      }


here is my app.component.html


<div style="display: block; background-color: #e2d8d8;">
  <canvas  baseChart
              [data]="doughnutChartData"
              [colors]="doughnutChartColors"
              [labels]="doughnutChartLabels"
              [chartType]="doughnutChartType"
              (chartHover)="chartHovered1($event)"
              (chartClick)="chartClicked1($event)"  #layout ></canvas>

</div>

上記のコードを試しましたが、何も機能しません。テキストがキャンバスのどこにも表示されません。ドーナツ グラフのテキスト センターを追加する方法。

Library using:

[https://valor-software.com/ng2-charts/][1] 
Doughnut


  [1]: https://valor-software.com/ng2-charts/