Rows getting limited in Gantt Chart using Chart JS

Question

I am working on creating Gantt chart using Chart.js. I am using datefns as the adapter. I faced few hurdles to set things.

Console Error - "ResizeObserver is not a constructor"

To overcome this I used a pollyfill and was able to load the chart

While the chart was loading, the bars were too close to one another(with 2000 bars)

To overcome this I made maintainAspectRatio :false

Now onload the chart was loading fine but when filter was applied the bars were taking large spaces

To overcome this, I tried to add a parent container above the chart and tried to dynamically 
give a height to it. This however did not work hence I tried to use the chart.resize() by 
removing the ResizeObserver pollyfill and setting resposive:false

With this I was able to make the chart responsive, however I now see that if the number of bars go beyond a certain limit (1632), the next set of bars overlap. I am sure I am missing something here and any inputs will be of great help.

//config code
return {
  type: 'bar',
  data: {
    labels :this.results.map((row,i)=>{
        return 'Test'+i
    }),
    datasets: [{
      label: 'Gantt',
      data: this.results.map((row,i)=>{
        return [row[this.startYear], row[this.endYear]]
      }),
    }]
  },
  options: {
    maintainAspectRatio:false,
    responsive:false,
    indexAxis:'y',
    scales:{
        x:{
          min:minYear,
          type:'time',
          time:
          {
            unit:'day'
          },
          ticks:
          {
            autoSkip: false
          }
        },
        y:{
          beginAtZero:true,
          ticks:
          {
            autoSkip: false
          }
        }
      }
        
  }
};



//resizeCode
  renderedCallback() {
      loadScript(this,CHARTJS3_JS + '/chartjs.js' )
    .then(() => loadScript(this, DATEFNS_JS + '/datefns.js'))
    .then(() => {

      const canvas = document.createElement('canvas');
      this.template.querySelector('div.chart').appendChild(canvas);
      const config = this.makeConfig();
      this.chart = new Chart(canvas.getContext('2d'), config);
      const num_bars = config.data.labels.length;
      const bar_Height = 250 + (num_bars)*20;
      this.chart.canvas.parentNode.style.height = `${bar_Height}px`;
      this.chart.resize();
    });

  }

//html
<div style="height:500px;max-height:250px;overflow-y:scroll">
<div class="chart slds-var-m-around_medium" style="height: 300px;" lwc:dom="manual"></div>
</div>