[Chartjs]-Javascript and Chart.JS – issue with getting unique text in 3 donut hole charts – same text showing for all 3 donut holes

Chart.pluginService.register({beforeDraw:…}) is called multiple times, and there is the core part for what you’re asking. You can check which chart you’re drawing and set the text depending by this. Following whole code (it’s simply yours plus some lines):

<script>
/* chart.js chart examples */

// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];

/* large line chart */
var chLine = document.getElementById("chLine");
var chartData = {
  labels: ["Sept 19", "Oct 19", "Nov 19", "Dec 19", "Jan 20", "Feb 20", "Mar 20", "Apr 20", "May 20", "Jun 20", "Jul 20"],
  datasets: [{
    data: [20, 14, 44, 33, 22, 33, 10, 40, 30, 20, 11],
    label: '# of Projects Identified by Month',
    backgroundColor: 'transparent',
    borderColor: colors[0],
    borderWidth: 4,
    pointBackgroundColor: colors[0]
  }
  //   {
  //     data: [639, 465, 493, 478, 589, 632, 674],
  //     backgroundColor: colors[3],
  //     borderColor: colors[1],
  //     borderWidth: 4,
  //     pointBackgroundColor: colors[1]
  //   }
  ]
};
if (chLine) {
  new Chart(chLine, {
    type: 'line',
    data: chartData,
    options: {
      title: {
        display: false,
        text: '# of Projects Identified by Month'
      },
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: '# of Projects Identified'
          }
        }],
        xAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
      legend: {
        display: false,
      },
      responsive: true
    }
  });
}

/* bar chart */
var ctx = document.getElementById('chBar');

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Proportion of Coded Projects'],
    datasets: [
      {
        label: 'Coded Projects',
        data: [70],
        backgroundColor: '#D6E9C6',
      },
      {
        label: 'Remaining Projects',
        data: [170],
        backgroundColor: colors.slice(0,1),
      },
    ]
  },
  options: {
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    }
  }
});

/* 3 donut charts */
var donutOptions = {
  cutoutPercentage: 85,
  legend: {position:'bottom', padding:5, labels: {pointStyle:'circle', usePointStyle:true}}
};

// donut 1
var chDonutData1 = {
    labels: ['Web-based search', 'Other'],
    datasets: [
      {
        backgroundColor: colors.slice(0,2),
        borderWidth: 0,
        data: [75, 25]
      }
    ]
  };
  
  var chDonut1 = document.getElementById("chDonut1");
  if (chDonut1) {
    new Chart(chDonut1, {
      type: 'pie',
      data: chDonutData1,
      options: donutOptions
    });
  }
  
  Chart.pluginService.register({
    beforeDraw: function(chart) {
      var width = chart.chart.width,
      height = chart.chart.height,
      ctx = chart.chart.ctx;
      
      ctx.restore();
      var fontSize = (height / 114).toFixed(2);
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "middle";
      
      var text = "";
      
      switch(chart.chart.canvas.id){
        case "chDonut1":
           text = "Sources";
           break;
        case "chDonut2":
           text = "Funder";
           break;
        case "chDonut3":
           text = "Search Method";
           break;
      }
      
      var textX = Math.round((width - ctx.measureText(text).width) / 2),
      textY = height / 2;
      
      ctx.fillText(text, textX, textY);
      ctx.save();
    }
  });
  
  // donut 2
  var chDonutData2 = {
    labels: ['AHRQ', 'NIH', 'Privately Funded', 'Locally Funded'],
    datasets: [
      {
        backgroundColor: colors.slice(0,6),
        borderWidth: 0,
        data: [40, 20, 10, 10]
      }
    ]
  };
  var chDonut2 = document.getElementById("chDonut2");
  if (chDonut2) {
    new Chart(chDonut2, {
      type: 'pie',
      data: chDonutData2,
      options: donutOptions
    });
  }
  
  // donut 3
  var chDonutData3 = {
    labels: [
      'NIH ExPORTER', 'Clinicaltrials.gpv', 'Other'],
      datasets: [
        {
          backgroundColor: colors.slice(0,3),
          borderWidth: 0,
          data: [21, 45, 55]
        }
      ]
    };
    var chDonut3 = document.getElementById("chDonut3");
    if (chDonut3) {
      new Chart(chDonut3, {
        type: 'pie',
        data: chDonutData3,
        options: donutOptions
      });
    }
    
    /* 3 line charts */
    var lineOptions = {
      legend:{display:true},
      tooltips:{interest:false,bodyFontSize:11,titleFontSize:11},
      scales:{
        xAxes:[
            {
                ticks:{
                    display:false
                  },
                  gridLines: {
                    display:false,
                    drawBorder:false
                  }
                }
              ],
              yAxes:[{display:false}]
            },
            layout: {
              padding: {
                left: 6,
                right: 6,
                top: 4,
                bottom: 6
              }
            }
          };
          
          
          </script>
          

Alternatively, you can check either by chart.id (it will be 1 for the first chart, 2 for the second etc…)