rvis.js-timeline

Hide horizontal gridlines and modify red border around nestedGroups on timevis plot


I'm looking for suggestion how to hide horizontal gridlines on timevis plot. Also, I want to replace the red border on nestedGroups with black. I've been trying to achieve this with vis.js library but not succeeding. Please see working code underneath.

library(shiny)
library(timevis)

dataLog <- data.frame(
  content = c("1","2","Surgery","3","Status","Treatment","Chemotherapy","TMZ"),
  start   = c("5/1/2016","5/1/2017","5/1/2016","5/1/2018","5/1/2016","5/1/2016","5/1/2016","5/1/2016"),
  end     = c("5/1/2016","5/1/2017","5/1/2016","5/1/2018","5/1/2016","5/1/2020","5/1/2020","5/1/2020"),
  group   =c("Specimen","Specimen","Surgery"," Specimen","Status","Treatment","Chemotherapy","TMZ"),
  type    =c("point","point","point","point","point","range","range","range"),
  className = c("ab_style","ab_style","serg_style","mo_style","status_style","white_style","blue_style","ab_style")
)

dataLogGroups <- data.frame(
  id = c("Specimen", "Surgery", "Status", "Treatment","Chemotherapy", "TMZ"),
  content = c("Specimen", "Surgery", "Status", "Treatment", "Chemotherapy", "TMZ"),
  style = "font-weight: bold"
)
groups<-dataLogGroups
groups$nestedGroups <- I(list(NA, NA, NA, list("Chemotherapy", "TMZ"), NA, NA))

ui <- fluidPage(
  title = "Testing styles",
  tags$head(
    tags$style(HTML("   
                        .vis-timeline { border: 2px solid black; font-size: 10pt; background: #ffffff;}
                        .vis-item.vis-line {border-width: 3px;}
                        .vis-item.vis-dot {border-width: 6px;border-radius: 6px;}
                        .vis-background .vis-minor.vis-odd {background: #ffffff;}
                        .vis-time-axis .vis-grid.vis-minor {border-width: 0px;border-color: #ffffff;}
                        .vis-time-axis .vis-text {color: black;padding-top: 10px;padding-left: 10px;}
                        .vis-time-axis .vis-grid.vis-major {border-width: 0px;border-color: #ffffff;}
                        .mo_style  { border-color: #301934; font-size: 10pt; color: black;  }
                        .ab_style { border-color: #FFAA33; font-size: 10pt; color: black;   }
                        .serg_style { border-color: #B9D9EB; font-size: 10pt; color: black;   }
                        .status_style { border-color: #008B8B; font-size: 10pt; color: black;   }
                        .white_style { border-color: white; background:#ffffff; color: white;   }
                        .blue_style { border-color: #17B169; font-size: 10px; Background: #17B169; color: #17B169; }
                        .nestedGroup { border-color: black; background:#ffffff; }
                        "))),
  timevisOutput("timelineCustom")
)

server <- function (input, output, session) {
  output$timelineCustom <- renderTimevis ({

    timevis(dataLog,groups = groups,options = list(orientation = 'top',editable = FALSE))
  })
}
shinyApp(ui = ui, server = server)

Solution

  • Assuming you just want the horizontal lines removed on the right side panel and not the left

    library(shiny)
    library(timevis)
    
    dataLog <- data.frame(
      content = c("1","2","Surgery","3","Status","Treatment","Chemotherapy","TMZ"),
      start   = c("5/1/2016","5/1/2017","5/1/2016","5/1/2018","5/1/2016","5/1/2016","5/1/2016","5/1/2016"),
      end     = c("5/1/2016","5/1/2017","5/1/2016","5/1/2018","5/1/2016","5/1/2020","5/1/2020","5/1/2020"),
      group   =c("Specimen","Specimen","Surgery"," Specimen","Status","Treatment","Chemotherapy","TMZ"),
      type    =c("point","point","point","point","point","range","range","range"),
      className = c("ab_style","ab_style","serg_style","mo_style","status_style","white_style","blue_style","ab_style")
    )
    
    dataLogGroups <- data.frame(
      id = c("Specimen", "Surgery", "Status", "Treatment","Chemotherapy", "TMZ"),
      content = c("Specimen", "Surgery", "Status", "Treatment", "Chemotherapy", "TMZ"),
      style = "font-weight: bold"
    )
    groups<-dataLogGroups
    groups$nestedGroups <- I(list(NA, NA, NA, list("Chemotherapy", "TMZ"), NA, NA))
    
    ui <- fluidPage(
      title = "Testing styles",
      tags$head(
        tags$style(HTML("   
                            .vis-foreground .vis-group {border: none;}
                            .vis-label.vis-nested-group {border-color: #000;}
                            "))),
      timevisOutput("timelineCustom")
    )
    
    server <- function (input, output, session) {
      output$timelineCustom <- renderTimevis ({
        
        timevis(dataLog,groups = groups,options = list(orientation = 'top',editable = FALSE))
      })
    }
    shinyApp(ui = ui, server = server)