How to shift the start time of Gantt chart from origin using plotly in r

plotly.js
1

I am trying to use “plotly” to plot a Gantt chart. The data is in the following format:
Untitled
I have a problem, when I used the code below to plot the start and end time for each resource, all the horizontal bars started from the origin. I would like each bar to start from its “Start” value as shown in the example above. Also, I would like to give a unique color for each task performed on the same resource. In other words, all the tasks performed by pump 1 should have a blue color…etc.

Thanks in advance Mohamed

the code:

    library(plotly)
    library(readxl)
    Pump_data <- read_excel("Pump_data.xlsx", col_types = c("text", "text", "date", "date")
    attach(Pump_data)
    df<-(Pump_data)
    df$Start <- as.POSIXct(df$Start, format = '%m/%d/%y %H:%M:%S')
    df$End <- as.POSIXct(df$End, format = '%m/%d/%y %H:%M:%S')
    z<-df$End-df$Start
    cols <- RColorBrewer::brewer.pal(length(unique(df$Resource)), name = "Set1")
    df$color <- factor(df$Resource, labels = cols)
    p <- plot_ly()
    for(i in 1:(nrow(df) -1 )){
      p <- add_trace(p,
                     x= c(df$Start[i], df$Start[i] + z[i]),
                     y= c(df$Resource[i]),
                     mode = "bar",
                     orientation = 'h',                 
                     showlegend = T,
                     hoverinfo = "text",
                     evaluate = TRUE  
      )
    }
    ```