Хотите показать полученные данные на диаграмме "Пончик" с процентной меткой в JavaScript

Я новичок в JavaScript. Я хочу динамически отображать количество строк на диаграмме "Пончик". Данные получаются динамически в виде таблицы.

key: "results_callback",
    value: function results_callback(data)
    {
        data = data.tasks;
        if (Object.keys(data).length == 0)
        {
            $("div#no_more_results").show();
            $("div#no_more_results").html("<h6 style='color: #9c0a0d;'>No More Results</h6>"); 
            this.empty_results = true;
        } 
        else
        {
            
            $("table#recent thead").append("<tr style='color: #840a0c!important;'>
<th>H1</th>
<th>H2</th>
<th class='text-center'>H3</th>
<th class='text-center'>H4</th>
<th class='text-right'>H5</th>
<th class='text-right'>H6</th>
</tr>");
console.log(analysis.length)
data.forEach(function (analysis, i)

это код, в котором происходит получение данных и предоставление их в виде таблицы. Теперь то, что я сделал. Я использовал localstorage.setItem через ID в Index.html(1) Page

<script>
var table = document.getElementById("recent");
//var totalRowCount = table.rows.length; // 5
var tbodyRowCount = table.tBodies[0].rows.length; // 4
alert("total no of files are:" +tbodyRowCount)
console.log(tbodyRowCount)
//console.log(totalRowCount)
</script>
<script>
var x = {
count: [tbodyRowCount],
//count: [totalRowCount]
};
localStorage.setItem("tbodyRowCount", count)
//localStorage.setItem("totalRowCount", count)
//localStorage.getItem("tbodyRowCount")
</script>

Вот код для создания таблицы в index.html(1)

<table  id="recent" class="table table-striped table-responsive recent_table">
<thead ></thead>
<tbody ></tbody>
<tfoot ></tfoot>
</table>

Вот код для получения данных в index.html(2), где я вызываю данные на Doughnut Chart

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript" src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs- 
plugin-labels.min.js"></script>
<!--<srcipt src = "https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin- 
datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></srcipt> -->

<script>
var tcount = localStorage.getItem("tbodyRowCount")
//var tcount = localStorage.getItem("totalRowCount")
console.log(tcount)
</script>
<script>
// setup 
const data = {
  labels: ['Files', 'Urls'],
  datasets: [{
   // label: 'Weekly Sales',
    data: [tcount, 12],
    backgroundColor: [
      'rgb(254, 214, 10)',
      'rgb(255, 90, 48)'

      
    ],
    borderColor: [
      "#ffffff",         
    ],
    borderWidth: 1
  }]
};

// config 
const config = {
  type: 'doughnut',
  data,
  options: {
    plugins: {
        labels: {
            render: (args) => {
               
                    return ` ${args.percentage}%`
                
            }
        }
    }
  }
  
};

// render init block
const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

plugins: {
  labels: {
    render: 'percentage',
    precision: 2
  }
}