The chart reponds super odd when select more than one states input. The x axis does not show up right or show duplicated dates. The graph is not working. I tried to use a loop to over StateFull name for adding a trace in the graph and was not able to get it fixed.

library(usmap) 
library(shiny)
library(ggplot2) #use ggplot2 to add layer for visualization
library(maps)
library(openxlsx)
library(readxl)
library(dplyr)
library(tidyr)

library(tidytuesdayR) # to get tidytuesday data
library(tidyverse) # for ggplot
library(janitor) # for clean_names
library(ggeasy) # making ggplot customisation easy
library(gganimate) # for animating map by year
library(transformr) # i think i need this for gganimate
library(patchwork) # to patch plots together
library(PNWColors)

library(tidyquant)
library(plotly)
library(DT)
library(ggrepel)
library(tidyr)
library(shinycssloaders)
library(shinythemes)

library(shinyBS)
library(scales)
library(shinyWidgets)
library(bslib)

set.seed(123)  # Ensure reproducibility

sample_data <- data.frame(
  Date = as.Date(c("2024-08-13", "2024-08-13", "2024-08-13", "2024-08-13", 
                   "2024-08-13", "2024-08-13", "2024-08-13", "2024-08-13",
                   "2024-08-14", "2024-08-14", "2024-08-14", "2024-08-14",
                   "2024-08-14", "2024-08-14", "2024-08-14", "2024-08-14",
                   "2024-08-15", "2024-08-15", "2024-08-15", "2024-08-15",
                   "2024-08-15", "2024-08-15", "2024-08-15", "2024-08-15")),
  Type = rep(c("A","B"), 12),
  state = rep(c("AZ", "CA", "CT"), each = 8),
  value = rep(0, 24),
  fruit = rep(c("Orange", "Apple"), 12),
  StateFull = rep(c("Arizona", "California", "Connecticut"), each = 8),
  Percent_byStateFruit = sample(c(1, 0, 0.98), 24, replace = TRUE) 
)


print(sample_data)


head(sample_data)

ui <- fluidPage(
  tabPanel("Time Series", fluid = TRUE, icon = icon("chart-bar"),
           titlePanel("Time Series"),
           fluidRow(
             column(6,
                    pickerInput(inputId = "TimeSeriesSelectState",
                                label = "Select States",
                                choices = c("Arizona", "California", "Connecticut"),  # Make sure averaged_data$Type is available
                                multiple = TRUE,
                                options = list(`actions-box` = TRUE,
                                               title='Enter state name')
                    ),
                    selectizeInput(inputId = "TimeseriesFruit",
                                   label = "Select  (Max 2)",
                                   choices = c("Orange","Apple"),  # Make sure averaged_data$Type is available
                                   multiple = TRUE,
                                   options = list(maxItems = 2, placeholder = 'select  name',
                                                  onInitialize = I('function() { this.setValue(""); }'))
                    ),
         
                    
             ),
             column(6,
                    dateRangeInput("date", "Date:",   
                                   start = "2024-08-13",
                                   end   = Sys.Date()+2),
            
                    
                    radioButtons("fruit", "Choice of Fruit", 
                                 choices = c("Orange", "Apple"), 
                                 selected = "Orange"),
                    helpText("Note: adding notes")
             )
           ),
           hr(),
           fluidRow(
             column(8,offset=2,
                    plotlyOutput("plot1")
             )
           )
  )  
) 


#titlePanel("US Election Tracker"),
#server started
server <- function(input, output) {
#--------Time Series Tab Line Chart
Count_data <- reactive({
  req(input$TimeseriesFruit) 
  req(input$TimeSeriesSelectState)
  req(input$date)
  req(input$fruit)
  filter(sample_data, Type %in% input$TimeseriesFruit) %>%
    filter(StateFull %in% input$TimeSeriesSelectState) %>%
    filter(Date %in% input$date)%>%
    filter(fruit %in% input$fruit) 
  
})

output$plot1 <- renderPlotly({
input$EnterTimes
input$TimeseriesFruit
input$TimeSeriesSelectState
input$date
input$fruit
isolate({
    # Initialize the plotly object
    fig <- plot_ly(Count_data())
    # Loop through each selected state and add a trace for it
    for (k in seq_along(input$TimeSeriesSelectState)) {
      state_data <- Count_data()[Count_data()$StateFull == input$TimeSeriesSelectState[k], ]
      fig <- add_trace(fig, data = state_data, 
                       x = ~Date, y = ~Percent_byStateFruit, type = 'scatter', mode = 'marker',
                       name = input$TimeSeriesSelectState[k],
                       line = list(width = 2)) %>%
        layout(
          title = "Trend",
          xaxis = list(title = "Date",
                       tickformat = "%b %d, %Y"),
          yaxis = list(
            title = "Percent",
            tickformat = ".2%",  
            range = c(-0.5, 1.5),
            tickmode = "linear",
            dtick = 0.2
          )
        )
    }
    fig  # Return the plotly figure

})
})
}


shinyApp(ui = ui, server = server)

Unintended Result:

I expect a good looking and working time series line chart.