Format numbers in spark_box's tooltip

[radovan-miletic]

Hi Victor,

I'm able to format numbers in title (and subtitle) in spark_box, but I can't pass formated numbers in y axis to the spark_box's tooltip:

library(apexcharter)
library(shiny)

spark_data <- data.frame(
    date = Sys.Date() + 1:20,
    var1 = round(rnorm(20, 50000, 10)),
    var2 = round(rnorm(20, 50000, 10)),
    var3 = round(rnorm(20, 50000, 10))
)  |> 
    dplyr::mutate(var1Perc = var1/sum(var1), .before = var2) # |> dplyr::mutate(var1Perc_formatted = sprintf("%.2f", var1Perc))

ui <- fluidPage(
    tags$style(".apexcharts-tooltip-text-goals-value, .apexcharts-tooltip-text-y-value { font-weight: 900; }"),
    apexcharter::apexchartOutput("SparkBoxEuro"),
    apexcharter::apexchartOutput("SparkBoxPerc")
)

server <- function(input, output, session) {
    output$SparkBoxEuro <- renderApexchart({
        apexcharter::spark_box(
            data = spark_data[, c(x = "date", y = "var1")],
            # data = spark_data[, c(x = "date", y = "var1")] |> dplyr::mutate(var1 = scales::dollar(var1, prefix = "", suffix = " €", big.mark = " ", decimal.mark = ",")),
            title = sum(spark_data$var1) |> scales::dollar(prefix = "", suffix = " €", big.mark = " ", decimal.mark = ","), 
            subtitle = "Sum of Variable 1",
            synchronize = "spark_data"
        )
    })

    output$SparkBoxPerc <- renderApexchart({
        apexcharter::spark_box(
            # data = spark_data[, c(x = "date", y = "var1Perc")],
            # data = spark_data[, c(x = "date", y = "var1Perc")] |> dplyr::mutate(var1Perc = paste0(round(var1Perc *100, 1), "%")), 
            data = spark_data[, c(x = "date", y = "var1Perc")] |> dplyr::mutate(var1Perc = scales::percent(var1Perc)),
            title = sum(spark_data$var1Perc) |> scales::percent(), 
            subtitle = "Percentage of Variable 1",
            synchronize = "spark_data"
        )
    })

}
shinyApp(ui, server)

Output:

I must be missing something here.

Thank you!

[pvictor]

Hello,

You cannot format number in tooltip with an R function, you have to huse a JavaScript function. For that you can use format_num() which a wrapper around d3.format.

With your example, you can try :

library(apexcharter)
library(shiny)

spark_data <- data.frame(
  date = Sys.Date() + 1:20,
  var1 = round(rnorm(20, 50000, 10)),
  var2 = round(rnorm(20, 50000, 10)),
  var3 = round(rnorm(20, 50000, 10))
)  |> 
  dplyr::mutate(var1Perc = var1/sum(var1), .before = var2) # |> dplyr::mutate(var1Perc_formatted = sprintf("%.2f", var1Perc))

ui <- fluidPage(
  tags$style(".apexcharts-tooltip-text-goals-value, .apexcharts-tooltip-text-y-value { font-weight: 900; }"),
  apexcharter::apexchartOutput("SparkBoxEuro"),
  apexcharter::apexchartOutput("SparkBoxPerc")
)

server <- function(input, output, session) {
  output$SparkBoxEuro <- renderApexchart({
    apexcharter::spark_box(
      data = spark_data[, c(x = "date", y = "var1")],
      # data = spark_data[, c(x = "date", y = "var1")] |> dplyr::mutate(var1 = scales::dollar(var1, prefix = "", suffix = " €", big.mark = " ", decimal.mark = ",")),
      title = sum(spark_data$var1) |> scales::dollar(prefix = "", suffix = " €", big.mark = " ", decimal.mark = ","), 
      subtitle = "Sum of Variable 1",
      synchronize = "spark_data"
    ) %>% 
      ax_tooltip(
        y = list(
          formatter = format_num("$,.0f", locale = "fr-FR") # currency format with 0 digits and french locale (euro, space as big mark and coma as decimal mark)
        )
      )
  })

  output$SparkBoxPerc <- renderApexchart({
    apexcharter::spark_box(
      # data = spark_data[, c(x = "date", y = "var1Perc")],
      # data = spark_data[, c(x = "date", y = "var1Perc")] |> dplyr::mutate(var1Perc = paste0(round(var1Perc *100, 1), "%")), 
      data = spark_data[, c(x = "date", y = "var1Perc")],
      title = sum(spark_data$var1Perc) |> scales::percent(), 
      subtitle = "Percentage of Variable 1",
      synchronize = "spark_data"
    ) %>% 
      ax_tooltip(
        y = list(
          formatter = format_num(".5%") # percentage format with 5 digits, values must be between 0 and 1
        )
      )
  })

}
shinyApp(ui, server)

Victor

[radovan-miletic]

Thank you, Victor.