I need to make a chart at the level with a row in the table, are there any tips on how to implement this enter image description here

I need the chart lines to match the row level in the table and this code draws a separate chart const diag = () => {

  document.getElementById("canvasic").innerHTML = ' ';
  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 
    
  }
  );

}

enter image description here