Ребят помогите с Диаграммами

Мне нужно сделать график на уровне со стракой в таблице, есть ли советы как это реализовать вот как это должно выглядеть

а вот как у меня сделано с помощью библы Chart.js, но она рисует отдельную диаграмму, а мне нужно, чтобы линии рисовались от таблицы на уровне соответствующей строки

JS code: const diag = () => {

  document.getElementById("canvasic").innerHTML = ' ';
  document.getElementById("canvasic").innerHTML = '<canvas id="densityChart" className="canav"></canvas>';

  densityCanvas = document.getElementById("densityChart");
  densityCanvas.style.height = '1900px'
   //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 
    
  }
  );

}

HTML:

  <div className="container" style={{width:800, height:400, display:'none'}} id="canvasic"></div>