Методы обратного вызова 'title' и 'label' вызываются несколько раз при наведении мыши на ChartJs

Question

Всякий раз, когда я наводю курсор на пузырьковую диаграмму, всплывающая подсказка вызывается несколько раз, а метка отображается в виде кратных.Прикрепление скриншота.Пожалуйста, могу ли я знать, что я должен сделать для этого.Я пробовал несколькими способами. введите описание изображения здесь

function getColor(score) {
  const drakred = '#FF0000';
  const red = '#ffbf00';
  const yellow = '#FFFF00';
  const orange = '#A9A9A9';
  const green = '#008000';
  // const extra = 'rgb(246, 104, 104, 0.4)';
  //const drakred = '#a30606';
  //const red = '#cb0101';
  //const yellow = '#d5c825';
  //const orange = '#da7625';
  //const green = '#00b653';

  if (score >= $scope.min && score < $scope.range1) {
    return drakred;
  } else if (score >= $scope.range1 && score < $scope.range2) {
    return red;
  } else if (score >= $scope.range2 && score < $scope.range3) {
    return yellow;
  } else if (score >= $scope.range3 && score < $scope.range4) {
    return orange;
  } else if (score >= $scope.range4 && score <= $scope.range5) {
    return green;
  }
  //else {
  //    return 'darkgreen';
  //}
}
function getBorderColor(score) {
  const drakred = '#5454a1';
  const red = '#5454a1';
  const yellow = '#5454a1';
  const orange = '#5454a1';
  const green = '#5454a1';
  // const extra = 'rgb(246, 104, 104, 0.4)';
  //const drakred = '#a30606';
  //const red = '#cb0101';
  //const yellow = '#d5c825';
  //const orange = '#da7625';
  //const green = '#00b653';

  if (score >= $scope.min && score < $scope.range1) {
    return drakred;
  } else if (score >= $scope.range1 && score < $scope.range2) {
    return red;
  } else if (score >= $scope.range2 && score < $scope.range3) {
    return yellow;
  } else if (score >= $scope.range3 && score < $scope.range4) {
    return orange;
  } else if (score >= $scope.range4 && score <= $scope.range5) {
    return green;
  } else {
    return 'darkgreen';
  }
}

const bubbleRadius = [4, 6, 8, 10];
// const plot = [20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100];
const plot = [30, 35, 40, 45, 50, 5, 10, 15, 20, 25, -30, -35, -40, -45, -50, -5, -10, -15, -20, -25];
var colors = ['#f48470', '#ffbf00', '#C0C0C0', '#BDB76B', '#32CD32'];  //, 'rgb(246, 104, 104,0.4)'
//const colors = ['#f2bf54', '#fe955e', '#79d663', '#a9d648', '#fe955e'];

const scoreData = [];
// const count = 60;
//let minimumScore = 0;
//let maximumScore = 100000;
for (const key in $scope.empDetails) {
  const element = $scope.empDetails[key];
  const color = colors[Math.floor(Math.random() * colors.length)];
  const radius = bubbleRadius[Math.floor(Math.random() * bubbleRadius.length)];
  const placement = plot[Math.floor(Math.random() * plot.length)];

  //if (key === '0') {
  //    minimumScore = element.gwp_achieved_campaign_products;
  //    maximumScore = element.gwp_achieved_campaign_products;
  //} else if (element.gwp_achieved_campaign_products < minimumScore) {
  //    minimumScore = element.gwp_achieved_campaign_products;;
  //} else if (element.gwp_achieved_campaign_products > maximumScore) {
  //    maximumScore = element.gwp_achieved_campaign_products;
  //}
  const esd = {
    x: element.gwp_achieved_campaign_products,
    y: placement,
    r: radius,
    rank: element.rank,
    ed_employee_code: element.ed_employee_code,
  };
  scoreData.push(esd);
}

const s1_5 = {
  data: [],
  backgroundColor: getColor($scope.range1 - 100),
  borderColor: getBorderColor($scope.range1 - 100),
  label: $filter('currencySuffix')($scope.min) + '-' + $filter('currencySuffix')($scope.range1)
}
const s5_10 = {
  data: [],
  backgroundColor: getColor($scope.range2-100),
  borderColor: getBorderColor($scope.range2 - 100),
  label: $filter('currencySuffix')($scope.range1) + '-' + $filter('currencySuffix')($scope.range2)
}
const s10_15 = {
  data: [],
  backgroundColor: getColor($scope.range3 - 100),
  borderColor: getBorderColor($scope.range3 - 100),
  label: $filter('currencySuffix')($scope.range2) + '-' + $filter('currencySuffix')($scope.range3)
}
const s15_20 = {
  data: [],
  backgroundColor: getColor($scope.range4 - 100),
  borderColor: getBorderColor($scope.range4 - 100),
  label: $filter('currencySuffix')($scope.range3) + '-' + $filter('currencySuffix')($scope.range4)
}
const s20_25 = {
  data: [],
  backgroundColor: getColor($scope.range5 - 100),
  borderColor: getBorderColor($scope.range5 - 100),
  label: $filter('currencySuffix')($scope.range4) + '-' + $filter('currencySuffix')($scope.range5)
}
//const s25 = {
//    data: [],
//    backgroundColor: getColor(2700000),
//    borderColor: getBorderColor(2700000),
//    label: 'Above 25 Lacs'
//}
for (let index = 0; index < scoreData.length; index++) {
  const score = scoreData[index].x;
  if (score >= $scope.min && score < $scope.range1) {
    s1_5.data.push(scoreData[index]);
  } else if (score >= $scope.range1 && score < $scope.range2) {
    s5_10.data.push(scoreData[index]);
  } else if (score >= $scope.range2 && score < $scope.range3) {
    s10_15.data.push(scoreData[index]);
  } else if (score >= $scope.range3 && score < $scope.range4) {
    s15_20.data.push(scoreData[index]);
  } else if (score >= $scope.range4 && score < $scope.range5) {
    s20_25.data.push(scoreData[index]);
  }
  // else if (score >= 2000001 && score <= 2500000) {
  //    s25.data.push(scoreData[index]);
  //}
}
const data = [s1_5, s5_10, s10_15, s15_20, s20_25]; //, s25 

var options = {
  responsive: true,
  maintainAspectRatio: false,
  legend: {
    display: true,
  },
  onClick: function (e) {
    var element = this.getElementAtEvent(e);

    // If you click on at least 1 element ...
    if (element.length > 0) {
      // Logs it
      var datasetLabel = this.config.data.datasets[element[0]._datasetIndex].label;
      var data = this.config.data.datasets[element[0]._datasetIndex].data[element[0]._index];
      $("#EmployeeModal").modal();

      getCampaignandEmployeeDetails(data.ed_employee_code, $state.params.id);
      getSingleEmployeeDetail(data.ed_employee_code);

    }
  },
  tooltips: {
    enabled: true,
    callbacks: {
      label: function (tooltipItem, data) {
        //return 'GWP:' + tooltipItem.yLabel + ', Slab:' + data.datasets[0].data[tooltipItem.index].slab;
        //return 'GWP:' + $filter('numberfilter')(data.datasets[0].data[tooltipItem.index].gwp_achieved_campaign_products) + ', Slab:' + data.datasets[0].data[tooltipItem.index].slab;
        //return "EmpId:" + data.datasets[0].data[tooltipItem.index].ed_employee_code + "\n Gwp: " + data.datasets[0].data[tooltipItem.index].gwp_achieved_campaign_products;
        return "Gwp:" + tooltipItem.xLabel;
      }
    }
  },
  scales: {
    xAxes: [
      {
        display: true,
        gridLines: {
          display: false
        },
        //ticks: {
        //    max: $scope.empDetails[$scope.empDetails.length - 1].gwp_achieved_campaign_products,
        //    min: $scope.empDetails[0].gwp_achieved_campaign_products,
        //    //stepSize: 10,
        //    //autoSkip
        //},
      },
    ],
    yAxes: [{
      id: 'y-axis-1',
      display: false,
      gridLines: {
        display: true
      },
      ticks: {
        max: 60,
        min: -60,
        //stepSize: 10
      }
    }],
  }
};

var myChart = new Chart(ctx, {
  type: 'bubble',
  data: {
    datasets: data
  },
  options: options
});