Necesito hacer un gráfico al nivel de una fila en la tabla. ¿Hay algún consejo sobre cómo implementar esto ? Ingrese la descripción de la imagen aquí .

Necesito que las líneas del gráfico coincidan con el nivel de fila en la tabla y este código dibuja un gráfico separado const diag = () => {

 document.getElementById("canvasic").innerHTML = '&nbsp;'; document.getElementById("canvasic").innerHTML = '<canvas id="densityChart" className="canav"></canvas>'; densityCanvas = document.getElementById("densityChart"); //remove canvas from container Chart.defaults.global.defaultFontFamily = "Arial"; Chart.defaults.global.defaultFontSize = 16; var densityData = { label: 'CallVol', data:calloiList1, backgroundColor: 'rgba(0,128,0, 0.6)', borderColor: 'rgba(0,128,0, 1)', borderWidth: 2, hoverBorderWidth: 0 }; var densityData1 = { label: 'PutVol', data:calloiList3 , backgroundColor: 'rgba(255,0,0, 0.6)', borderColor: 'rgba(255,0,0, 1)', borderWidth: 2, hoverBorderWidth: 0 }; var chartOptions = { scales: { yAxes: [{ barPercentage: 0.5 }] }, elements: { rectangle: { borderSkipped: 'left', } } }; var barChart = new Chart(densityCanvas, { type: 'horizontalBar', data: { labels: calloiList4, datasets: [densityData,densityData1], }, options: chartOptions } ); }

ingrese la descripción de la imagen aquí