I have an app that looks like this

The numbers on either side of the color axis (1 and 185) are somewhat meaningless. What I would like instead is “Better” and “Worse”, like this:

Is there a way to replace the numbers with my desired text? I’ve looked at this answer but I can’t follow it – I need more help on what and where exactly to implement: Google charts geochart – text values in colorAxis

If I can’t get the text on either side, then a title on top of the bar would be an improvement at least, but again, I need a more comprehensive answer to the one given here: Google Charts: How to add a caption to the color axis

The relevant code is:

---
title: "Climate Vulnerability and Readiness"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
runtime: shiny
editor_options: 
  markdown: 
    wrap: 72
---

<style>
.justified-text {
  text-align: justify;
  margin-left: 6em;
  margin-right: 6em;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .justified-text {
    margin-left: 1em;
    margin-right: 1em;
    padding-top: 4em; 
  }
  .sidebar-panel, .main-panel {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
  .tabset-panel {
    width: 100% !important;
  }
  .sidebar-layout {
    flex-direction: column;
  }
  .shiny-output-error {
    display: none;
  }
  .main-panel, .content {
    height: 100% !important;
    overflow: auto;
  }
  .titlePanel {
    padding-top: 4em; 
  }
  .shiny-bound-output {
    height: 100%;
  }
  }

/* Media query for desktop devices */
@media (min-width: 769px) {
  .main-panel {
    overflow: auto;
  }
}
</style>

# Introduction {.tabset}
<div class="justified-text">

[Introductory text]

</div>

# Analysis {.tabset}

```{r}
library(shiny)
library(googleVis)
library(dplyr)
library(DT)

# Load your data
combined_vul_data <- 
 structure(list(ISO3 = c("AF", "AL", "DZ", "AD", "AO", "AG", "AR", 
"AM", "AU", "AT", "AZ", "BS", "BH", "BD", "BB", "BY", "BE", "BZ", 
"BJ", "BT"), Name = c("Afghanistan", "Albania", "Algeria", "Andorra", 
"Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", 
"Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", 
"Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan"
), vul_capacity_Rank_2021 = c(0.709035449, 0.511126182, 0.523332101, 
NA, 0.740026186, 0.621133795, 0.446088596, 0.462491218, 0.296565054, 
0.26689445, 0.47917568, NA, 0.453936004, 0.649876424, 0.398904506, 
0.386808093, 0.27763708, 0.547525366, 0.763503499, 0.635633065
)), class = "data.frame", row.names = c(NA, -20L))
  

# Define UI for the map
ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      .dataTables_wrapper .dataTables_filter {
        float: left !important;
        text-align: left !important;
      }
      .dataTables_wrapper .dataTables_filter input {
        margin-left: 0.5em;
        width: 200px;
      }
      .table-container {
        display: flex;
        flex-direction: row;
      }
      .table-container .table-controls {
        margin-right: 2em;
      }
      @media (max-width: 768px) {
        .table-container {
          flex-direction: column;
        }
        .table-container .table-controls {
          margin-right: 0;
          margin-bottom: 1em;
        }
        .shiny-input-container {
          width: 100%;
        }
        .dataTables_wrapper .dataTables_filter input {
          width: 100%;
        }
        .main-panel, .content {
          height: calc(100vh - 56px) !important;
          overflow: auto;
        }
        .main-panel {
          height: 100vh;
        }
      }
    "))
  ),
  titlePanel(div(span("Country Rankings"), style={'padding-top: 15px'})),
  tabsetPanel(
    tabPanel("Vulnerability Map",
      sidebarLayout(
        sidebarPanel(
          selectInput("year", "Select Year", choices = 2021, selected = 2021),
          selectInput("category", "Select Category", 
                      choices = list("Adaptive Capacity" = "vul_capacity"), selected = "vul_vulnerability"),
          textOutput("category_context")
        ),
        mainPanel(
          htmlOutput("map")
        )
      )
    )
  )
)

# Define server logic for the map
server <- function(input, output) {
  output$category_context <- renderText({
    context <- switch(input$category,
                      "vul_capacity" = "The availability of social resources for sector-specific adaptation. In some cases, these capacities reflect sustainable adaptation solutions. In other cases, they reflect capacities to put newer, more sustainable adaptations into place.", "")
    context
  })
  
  output$map <- renderGvis({
    year <- input$year
    category <- input$category
    
    # Create the column name for the selected year and category
    rank_column <- paste(category, "_Rank_", year, sep = "")
    
    # Filter and prepare the data
    map_data <- combined_vul_data %>%
      select(ISO3, Name, Rank = !!sym(rank_column)) %>%
      mutate(Tooltip = ifelse(is.na(Rank), paste(Name, "- Insufficient data"), paste(Name)))
            
    # Update locationvar column
    map_data <- map_data %>%
      mutate(Location = ifelse(Name %in% c("Congo (Brazzaville)", "Congo (Kinshasa)"), ISO3, Name))
    
    # Determine the range of the Rank values
    min_rank <- min(map_data$Rank, na.rm = TRUE)
    max_rank <- max(map_data$Rank, na.rm = TRUE)
    
    # Create the map
    gvisGeoChart(map_data, locationvar = "Location", colorvar = "Rank",
                 hovervar = "Tooltip",  
                 options = list(colorAxis = paste0("{minValue:", min_rank, ", maxValue:", max_rank, ", colors:['#00FF00', '#FFFF00', '#FF0000']}"),
                                backgroundColor = '#81d4fa', datalessRegionColor = '#f5f5f5',
                                defaultColor = '#f5f5f5',
                                tooltip = "{isHtml: true}",
                                width = "100%",
                                height = "500px"))  
  })

}

shinyApp(ui = ui, server = server)
```