how to change timeline in google gantt chart

Question

i need to change the below timeline in google gantt chart using days, weeks, months dynamicaly how could i achieve this

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

      let chartTask = [];

      function daysToMilliseconds(days) {
        return days * 24 * 60 * 60 * 1000;
      }

      function drawChart() {
       var jsonData = JSON.parse($parameters.JsonData);
       console.log(jsonData);
      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');
    //   let color;
    // if($parameters.IsShowCriticalPath)
    // {
    //     color = "crictical";
    // }
    var tasks = [
          {
            id: 'Research',
            name: 'Find sources',
            resource: null,
            startDate: new Date(2024, 4, 1),
            endDate: new Date(2024, 4, 5),
            duration: daysToMilliseconds(1),
            percentComplete: 100,
            dependencies: null
          },
          {
            id: 'Write',
            name: 'Write paper',
            resource: null,
            startDate: new Date(2024, 4, 6),
            endDate: new Date(2024, 4, 9),
            duration: daysToMilliseconds(3),
            percentComplete: 25,
            dependencies: 'Research,Outline'
          },
          {
            id: 'Cite',
            name: 'Create bibliography',
            resource: null,
            startDate: new Date(2024, 4, 5),
            endDate: new Date(2024, 4, 7),
            duration: daysToMilliseconds(1),
            percentComplete: 20,
            dependencies: 'Research'
          },
          {
            id: 'Complete',
            name: 'Hand in paper',
            resource: null,
            startDate: new Date(2024, 4, 9),
            endDate: new Date(2024, 4, 10),
            duration: daysToMilliseconds(1),
            percentComplete: 0,
            dependencies: 'Cite,Write'
          },
          {
            id: 'Outline',
            name: 'Outline paper',
            resource: null,
            startDate: new Date(2024, 4, 5),
            endDate: new Date(2024, 4, 6),
            duration: daysToMilliseconds(1),
            percentComplete: 100,
            dependencies: 'Research'
          }
        ];
    
    var filterTasks = [];
    tasks.forEach(function(task,index){
            filterTasks.push(task);
            chartTask.push(task);
    });

    filterTasks.forEach(function(filtertask,index){
        var style = document.createElement('style');
        if(filtertask.endDate < $parameters.CurrentDate && $parameters.IsShowCriticalPath)
        {
            // task.resource = color;
            style.innerHTML = "#"+$parameters.DivId+" svg {g:nth-child(7){rect:nth-child("+index + 1+") {fill: red;}} g:nth-child(8){path:nth-child("+index + 1+") {fill: darkred;}}}"
            document.head.append(style);
        }
        else{
            style.innerHTML = "#"+$parameters.DivId+" svg {g:nth-child(7){rect:nth-child("+index + 1+") {fill: blue;}} g:nth-child(8){path:nth-child("+index + 1+") {fill: darkblue;}}}"
            document.head.append(style);
        }
        data.addRow([
            filtertask.id,
            filtertask.name,
            // task.resource,
            filtertask.startDate,
            filtertask.endDate,
            filtertask.duration,
            filtertask.percentComplete,
            filtertask.dependencies
            ]);
    } );

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: $parameters.IsShowCriticalPath,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 1,
              color:"#c93e0e",
              timeline:{
                  showRowLabels : true,
                  timeFormat : { formatType: 'medium', unit: 'week' }
              }
            },
            color:"#c93e0e",
            hAxis: {
                        format: "MMM dd",
                        title: "Date", 
                        viewWindowMode: 'Explicit',
                        viewWindow:{
                            min: new Date($parameters.StartDate),
                            max: new Date($parameters.EndDate)
                            }

                        }
          }
        };

        var chart = new google.visualization.Gantt(document.getElementById($parameters.DivId));

        // google.visualization.events.addListener(chart, 'ready', selectHandler);

        chart.draw(data, options);

i need to change the below timeline in google gantt chart please help me thank you var options = { height: 275, gantt: { criticalPathEnabled: $parameters.IsShowCriticalPath, criticalPathStyle: { stroke: '#e64a19', strokeWidth: 1, color:"#c93e0e", timeline:{ showRowLabels : true, timeFormat : { formatType: 'medium', unit: 'week' } } },