google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
['I0', 'External data acquisition request', 'RB',
     new Date(2022, 4, 9), new Date(2022, 5, 29), null, 10, null],
    ['I1', 'data extraction', 'JK',
     new Date(2022, 4, 15), new Date(2022, 5, 5), null, 100, null],
    ['I2', 'Create dataframe', 'RB',
     new Date(2022, 4, 17), new Date(2022, 5, 10), null, 100, 'I1']
  ]);

   var options = {
      height: 700,
      gantt: {
        criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
        arrow: {
          angle: 50,
          width: 1,
          color: 'green',
          radius: 30
        }
      }
    };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <div id="chart_div"></div>