I am using Angular 9 with ng2-charts and chartjs-plugin-datalabels for rendering my data on chart.

Problem: I am rendering Doughnut chart with 5 categories. I am able to show percentage value in chart but when user hovers on any category instead of showing percentage on tooltip it is showing actual value. I am not sure how to resolve this. Below is my code sample.

I tried this url: ng2-chart: How to show percentage values inside the chart?

But this didnt worked for me.

pieChartPlugins:[] =[]
    pieChartLegend:boolean = true;
    pieChartType = "doughnut"
    pieChartData =[0,0,0];
    pieChartLabels = [];
    pieChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          labels: {
            render: 'percentage',
            fontColor: ['black', 'black', 'black'],
            precision: 2,
          }
        },
        legend: {
          position: 'bottom',
          labels: {
            fontColor: "black",
            boxWidth: 15,
            padding: 10,
            fontFamily: 'Poppins ',
            fontSize: 12,
          },  
        },
        animation: {
          animateScale: true,
          animateRotate: true
        }
    };
    isPieChartPercentage :boolean = true;
    pieChartColors = [
        {
          backgroundColor: [
            'rgb(144, 238, 144)',
            '#ADD8E6',
            '#ffff80',
            '#e0eafc',
            '#f0b961',
            'black'
          ]
        }
    
      ]

Any help will be very much appreciated. Thanks.