I'm trying to create a simple Gantt chart in a tab that is based from this tutorial - https://webdesign.tutsplus.com/tutorials/build-a-simple-gantt-chart-with-css-and-javascript--cms-33813.

I am able to create the timeline in the tabs but the offsetLeft and offsetWidth is not working properly - https://gyazo.com/2e43741d106ecd4eac21d72aa520368a.

I wanted to get the offsetLeft and offsetWidth of each li elements but sometimes it returns a value of zero.

Here is the javascript code:

<script type="text/javascript">
  jQuery(function($){
    //create chart function
    function createChart_tab(e) {
      const years_tab = document.querySelectorAll('.research-proj-tabs .chart-years li');
      const tasks_tab = document.querySelectorAll('.research-proj-tabs .chart-bars li');
      const yearsArray_tab = [...years_tab];

      tasks_tab.forEach(el => {
        //1
        const duration = el.dataset.duration.split("-");
        //2
        const startYear = duration[0];
        const endYear = duration[1];
        let left = 0,
          width = 0;

        //3
        if (startYear) {
          const filteredArray = yearsArray_tab.filter(year => year.textContent == startYear);
          left = filteredArray[0].offsetLeft;
        }
         
        // 4
        if (endYear) {
          const filteredArray = yearsArray_tab.filter(year => year.textContent == endYear);
          width = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth - left;
        }

        // 1
        el.style.left = `${left}px`;
        el.style.width = `${width}px`;
        // 4
        if (e.type == "load") {
          // 2
          el.style.backgroundColor = el.dataset.color;
          // 3
          el.style.opacity = 1;
        }
      });   
    }
    //window.addEventListener("onload", createChart);
    window.addEventListener("load", createChart_tab);
    window.addEventListener("resize", createChart_tab);
  });
</script>

While HTML and CSS is following the same layout here: https://webdesign.tutsplus.com/tutorials/build-a-simple-gantt-chart-with-css-and-javascript--cms-33813

I just want to figure out what am I missing here. Thanks!