How to hide label of specific data?, chartjs plugin datalabels

Question

I made a radial progress bar using the nested doughnut chart, the object works fine.

I wanted to show the progress on a label, but the label became visible in the data I used as the background.

q1:How can i hide the label i just use as background?

q2:Do you think it is good to make progress bar using chartjs? (real time) I would be very happy if you could provide information about another alternative library.

My code:

var _gaugeValue = 5;
var _gaugeValue2 = 43;
var _gagueMaxVal = 100;
var _gagueMaxVal2 = 150;
var ctxGauge = document.getElementById("myCanvasGauge");

var myGauge = new Chart(ctxGauge, {
        type: "doughnut",
        data: {
          datasets: [
            {
              data: [_gaugeValue2, _gagueMaxVal2 - _gaugeValue2],
              backgroundColor: ["rgba(255,0,0,1)", "rgba(220,220,220,1)"],
              hoverOffset: 4,
              cutout: "80%",
            },
            {
              data: [_gaugeValue, _gagueMaxVal - _gaugeValue],
              backgroundColor: ["rgba(71,148,218,1)", "rgba(220,220,220,1)"],
              hoverOffset: 4,
              cutout: "70%",
              options: {
                plugins: {
                  datalabels: {
                    display: false,
                  },
                },
              },
            },
          ],
        },
        options: {
          response: true,
          maintainAspectRatio: false,
          plugins: {
            tooltip: {
              enabled: false,
            },
            datalabels: {
              backgroundColor: function (context) {
                return context.dataset.backgroundColor;
              },
              borderColor: "white",
              borderRadius: 25,
              borderWidth: 2,
              color: "white",
              display: function (context) {
                var dataset = context.dataset;
                var count = 2;
                var value = dataset.data[1];
                return value > count * 1.5;
              },
              font: {
                weight: "bold",
              },
              padding: 6,
              formatter: Math.round,
            },
          },
        },
        plugins: [ChartDataLabels],
      });
      
      
function changeData() {
        _gaugeValue = Math.floor(Math.random() * 100) - 1;
        myGauge.data.datasets[1].data = [
          _gaugeValue,
          _gagueMaxVal - _gaugeValue,
        ];
        myGauge.update();
      }

function changeData2() {
        _gaugeValue2 = Math.floor(Math.random() * 100) - 1;
        myGauge.data.datasets[0].data = [
          _gaugeValue2,
          _gagueMaxVal2 - _gaugeValue2,
        ];
        myGauge.update();
      }

.gauge-container {
  margin: auto;
}

.button-container {
  margin: auto;
  padding: 10px;
}

   <script
      src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"
      integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"
      integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>


<div class="gauge-container">
      <canvas id="myCanvasGauge"></canvas>
    </div>

    <div class="button-container">
      <button onclick="changeData()">Change Data 1</button>
    </div>
    <div class="button-container">
      <button onclick="changeData2()">Change Data 2</button>
    </div>