Soy nuevo en JavaScript y realmente quiero saber cómo podemos mostrar datos en forma de porcentaje al obtener datos porcentuales a través del gráfico de anillos usando JS

 <div class="block-text"> <div class="flex-chart"> <div class="box-file"></div><p class="spacing">abc</p> <p id = "count">20%</p></div> <div class="flex-chart"> <div class="box-url"></div><p class="spacing">xyz</p> <p>30%</p> </div> </div>

Aquí está el código JS de Donut Chart:

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script> <script> // setup const data = { //labels: ['xyz', 'abc'], datasets: [{ // label: 'Weekly Sales', data: [12, 20], backgroundColor: [ 'rgb(254, 214, 10)', 'rgb(255, 90, 48)' ], borderColor: [ "#ffffff", ], borderWidth: 1 }] }; // config const config = { type: 'doughnut', data, options: { plugins: { datalabels: { formatter: (value, ctx) => { let datasets = ctx.chart.data.datasets; if (datasets.indexOf(ctx.dataset) === datasets.length - 1) { var sum = datasets[0].data.reduce((a, b) => a + b, 0); var percentage = Math.round((value / sum) * 100) + '%'; return percentage; } else { return percentage; } }, color: '#fff', } } } } // render init block const myChart = new Chart( document.getElementById('chart'), config );

Ahora quiero mostrar el porcentaje para obtenerlo de la variable de porcentaje del gráfico de anillos y publicarlo en la etiqueta 'abc' abc

20%

Quiero datos porcentuales en reemplazo del 20 % porque el 20 % es estático en este momento