rheightapexcharts

Height problem when displaying a small Apexchart graph


So I am making a shiny app using apexcharter for the graphs, and I need to make very small histograms (about 40/60 pixels high) that would be contained in boxes with other key statistics. At first I used the spark_box function that allowed me to have quick minimal graph the size I wanted, but the border and shadows made them stand out too much in a "ugly" way.

When I tried to simply switch to the apex function for those histograms howerver, I noticed that the displayed graph didn't use the full height available despite me disabling all the labels options as to recreate a spark_box. Here is what it looks like :

Difference of size between the spark_box and the apex chart, both set at 60px of height

Is there a way to make the apex chart occupy the full space available, or even a way to disable the border and shadows of the spark_box ?

Here is a reproducible exemple of the issue :

### Libraries

library(shiny)
library(bslib)
library(tidyverse)


### Data

myIris <- iris %>% as_tibble() %>% mutate(Species = as.factor(Species)) %>% 
  summarise(Sepal.Length = mean(Sepal.Length), .by = Species)


### App

server <- function(input, output, session) {
  
  output$spark <- renderSparkBox(spark_box(myIris, type = "column"))
  
  output$chart <- renderApexchart(
    apex(data = myIris, mapping = aes(x = Species, y = Sepal.Length)) %>%
      ax_legend(show = FALSE) %>%
      ax_dataLabels(enabled = FALSE) %>%
      ax_yaxis(labels = list(show = FALSE)) %>%
      ax_xaxis(labels = list(show = FALSE, style = list(fontSize = "12px", fontWeight = 10)),
               axisBorder = list(show = FALSE), axisTicks = list(show = FALSE)) %>%
      ax_grid(yaxis = list(lines = list(show = FALSE)), 
              xaxis = list(lines = list(show = FALSE))) %>%
      ax_chart(toolbar = TRUE)
  )
  
  session$onSessionEnded(function() {stopApp()})
}

ui <- page_fluid(
  div(class = "content",
      div(class = "container-xl",
          card_body("This is the spark box (height = 60px)", 
                    sparkBoxOutput("spark", height = "60px")),
          card_body("This is the apex chart (height = 60px)", 
                    apexchartOutput("chart", height = "60px"))
      )))

shinyApp(ui, server)

Solution

  • I found the parameter that allowed me to do exactly what I described. Instead of all the ax_[...]() functions that used to emulate a spark_box with an apex chart, I can instead use the sparkline argument of ax_chart() as follows :

    ax_chart(sparkline = list(enabled = TRUE))
    

    Which gives me this :

    The same graph made both as a spark_box and an apex chart with sparkline enabled

    Here is the full corrected code :

    ### Libraries
    
    library(shiny)
    library(bslib)
    library(tidyverse)
    
    
    ### Data
    
    myIris <- iris %>% as_tibble() %>% mutate(Species = as.factor(Species)) %>% 
      summarise(Sepal.Length = mean(Sepal.Length), .by = Species)
    
    ### App
    
    server <- function(input, output, session) {
      
      output$spark <- renderSparkBox(spark_box(myIris, type = "column"))
      
      output$chart <- renderApexchart(
        apex(data = myIris, mapping = aes(x = Species, y = Sepal.Length)) %>%
          ax_chart(sparkline = list(enabled = TRUE))
      )
      
      session$onSessionEnded(function() {stopApp()})
    }
    
    ui <- page_fluid(
      div(class = "content",
          div(class = "container-xl",
              card_body("This is the spark box (height = 60px)", 
                        sparkBoxOutput("spark", height = "60px")),
              card_body("This is the apex chart (height = 60px)", 
                        apexchartOutput("chart", height = "60px"))
          )))
    
    shinyApp(ui, server)