Chart height behaving unpredictably at <= 125px

[Mkranj]

I'm making a shiny module that will display a relatively short bar for percentages, and planning to use multiple. I've found that setting the actual chart to take up less space behaves weirdly, since increasing height from 80px to 120px actually made the chart smaller. It's easiest to demonstrate with a tiny shiny app:

library(shiny)
library(echarts4r)

ui <- fluidPage(
  sliderInput("height", "Height in px", min = 20, max = 300, value = 150),
  uiOutput("echart")
)

server <- function(input, output, session) {
  graf <- reactive({

    chartdata <- tribble(
      ~type, ~barlength,
      "bar", 66
    )

    e_chart(chartdata, type) |> 
      e_bar(barlength, showBackground = T) |> 
      e_y_axis(min = 0, max = 100) |> 
      e_flip_coords() |> 
      e_y_axis(axisLabel = list(show = F),
               axisLine = list(show = F),
               axisTick = list(show = F)) |> 
      e_legend(show = F)
  })

  output$echart <- renderUI({
    req(input$height)
    user_height <- paste0(input$height, "px")
    echarts4rOutput("bar", height = user_height)
  })

  output$bar <- renderEcharts4r(graf())
}

shinyApp(ui, server)

The input slider manipulates the height in echarts4rOutput. Try dragging it to 125 px and lower, and the graph will actually start to expand as you lower the height. I've noticed this happens not only with echarts4rOutput, but also with e_chart() itself when providing a height argument, albeit the critical values seem to be smaller there.
Any ideas what's going on? If a certain minimum height is to be expected, please document that somewhere.

Additional note: the height of the Output affects the div() parent of the chart itself, which is smaller. The div changes height appropriately, but the chart inside behaves strangely as the values get smaller.

Thanks for all the work on the package!

[JohnCoene]

echarts.js tries to fit your plot in the parent div (your are adjusting the size of said parent div).

It's generally the grid that automatically adjusts and creates this unpredictable result.

library(shiny)
library(tibble)

ui <- fluidPage(
  sliderInput("height", "Height in px", min = 20, max = 300, value = 150),
  uiOutput("echart")
)

server <- function(input, output, session) {
  graf <- reactive({

    chartdata <- tribble(
      ~type, ~barlength,
      "bar", 66
    )

    e_chart(chartdata, type) |> 
      e_bar(barlength, showBackground = T) |> 
      e_y_axis(min = 0, max = 100) |> 
      e_flip_coords() |> 
      e_y_axis(axisLabel = list(show = F),
               axisLine = list(show = F),
               axisTick = list(show = F)) |> 
      e_legend(show = F) |>
      e_grid(top = 0, left = 20, right = 0, bottom = 20)
  })

  output$echart <- renderUI({
    req(input$height)
    user_height <- paste0(input$height, "px")
    echarts4rOutput("bar", height = user_height)
  })

  output$bar <- renderEcharts4r(graf())
}

shinyApp(ui, server)

Define a static grid to fix that.

Thanks for the reprex!