unable to access this inside PluginServiceGlobalRegistrationAndOptions

[moblizeit]

Reproduction of the problem

i am using code like

export class StatChartComponent implements OnInit {
  public pieChartLabels: Label[] = ['Healthy Accounts',  ''];
  public pieChartType: ChartType = 'doughnut';
  public pieChartLegend = true;
  public pieChartData: number[] = [0, 0];
  myText = 'Hello World' //THIS IS NOT ACCESSIBLE

  @Input() data:any

  public pieChartColors = [
    {
      backgroundColor: [ 'rgba(11,255,199,1)' , 'rgba(244,120,120,1)'],
    },
  ];
  
  public pieChartOptions: ChartOptions = {
    responsive: true,
    cutoutPercentage: 80,
    legend: {
      position: 'top',
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          const label = ctx.chart.data.labels[ctx.dataIndex];
          return label;
        },
      },
    }
  };

  public doughnutChartPlugins: PluginServiceGlobalRegistrationAndOptions[] = [{
    beforeDraw(chart:any) {
      const ctx = chart.ctx;
      const txt = 'Center Text';
  
      //Get options from the center object in options
      const sidePadding = 60;
      const sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
  
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      const centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
      const centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
  
      //Get the width of the string and also the width of the element minus 10 to give it 5px side padding
      const stringWidth = ctx.measureText(txt).width;
      const elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
  
      // Find out how much the font can grow in width.
      const widthRatio = elementWidth / stringWidth;
      const newFontSize = Math.floor(30 * widthRatio);
      const elementHeight = (chart.innerRadius * 2);
  
      // Pick a new font size so it will not be larger than the height of label.
      const fontSizeToUse = Math.min(newFontSize, elementHeight);
  
      ctx.font = fontSizeToUse + 'px Arial';
      ctx.fillStyle = 'rgba(94,137,168,1)';
  
      // Draw text in center
      console.log("drawing at", centerX + ":" + centerY)
      ctx.fillText(this.myText , centerX, centerY);   //THIS LINE DOES NOT WORK AS THIS IS NOT AVAIALBLE
    }
  }];

The problem is now i have lost the access to this and cannot refer myText inside the plugin method. how to do it?

[paviad]

Try this:

public doughnutChartPlugins: PluginServiceGlobalRegistrationAndOptions[] = [{
    beforeDraw: (chart:any) => {