How to have a echarts4r graph that fill all the box - shiny dashboard

When plotting a graph with echarts4r within a box in a shiny Dashboard, the graph doesn't fill the box. It's like there's a margin on the left and right sides of the graph. see my sample code below for illustration purpose

library(shiny)
library(dplyr)
library(shinydashboard)
library(echarts4r)



test<-data.frame(replicate(10,sample(0:50,100,rep=TRUE)))
date <- as.Date("2021/08/04")

# defining length of range 
len <- 100

# generating range of dates
test$date<-seq(date, by = "day", length.out = len)

ui <-dashboardPage(
  dashboardHeader(title = "cran.rstudio.com"),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard")
    )
  ),
  dashboardBody(
    tabItems(
      tabItem("dashboard",
        fluidRow(
          valueBoxOutput("rate"),
          valueBoxOutput("count"),
          valueBoxOutput("users")
        ),
        fluidRow(
          box(
            width = 8, status = "info", solidHeader = TRUE,
            title = "Population X1 to X10",
            echarts4rOutput(
              outputId = "plot1")
          )
        )
      )
    )
  )
)

server <- function(input, output, session) {
  
  output$plot1 <- renderEcharts4r({
    test |>
      e_charts(x = date) |>
      e_area(
        X1,
        name = "X1",
        x_index = 0,
        y_index = 1
      )|>
      e_line(
        X2,
        x_index = 0,
        y_index = 0,
        lineStyle = list(
          color = "#39558CFF",
          width = 2,
          opacity = 0.8
        )
      ) |>      
      e_line(
        X3,
        x_index = 0,
        y_index = 1,
        lineStyle = list(
          color = "#FA2B2B",
          width = 1.8,
          opacity = 0.7
        )
      ) |>
      e_line(
        X4,
        x_index = 0,
        y_index = 1,
        lineStyle = list(
          color = "#ED7D3A",
          width = 1.8,
          opacity = 0.8,
          type = "dotted"
        )
      )  |>
      e_datazoom(
        x_index = c(0, 1),
        toolbox = FALSE,
        start = dim(test)[1]-45,
        end = dim(test)[1]
      ) |>
      e_axis_labels(y = "test box") |>
      e_show_loading() |>
      e_tooltip(trigger = "axis") |>
      e_x_axis(date, axisPointer = list(show = TRUE,
                                        label = list(show = FALSE))) 
  })
}

shinyApp(ui = ui, server = server)

I add a screenshot to make it clearer. The objective would be to fill the yellow part.

Solution

One option to fix that would be to set the plot margins in absolute units via e_grid, i.e. according to the docs the grid margins on the left and the right are by default set equal to "10%" of the container width, i.e. the larger the container, the larger the margins in terms of absolute units.

In the code below I use e_grid(left = 40, right = 40) to set the margins to 40px:

library(shiny)
library(dplyr)
library(shinydashboard)
library(echarts4r)


test<-data.frame(replicate(10,sample(0:50,100,rep=TRUE)))
date <- as.Date("2021/08/04")

# defining length of range 
len <- 100

# generating range of dates
test$date<-seq(date, by = "day", length.out = len)

ui <-dashboardPage(
  dashboardHeader(title = "cran.rstudio.com"),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard")
    )
  ),
  dashboardBody(
    tabItems(
      tabItem("dashboard",
              fluidRow(
                valueBoxOutput("rate"),
                valueBoxOutput("count"),
                valueBoxOutput("users")
              ),
              fluidRow(
                box(
                  width = 8, status = "info", solidHeader = TRUE,
                  title = "Population X1 to X10",
                  echarts4rOutput(
                    outputId = "plot1")
                )
              )
      )
    )
  )
)

server <- function(input, output, session) {
  
  output$plot1 <- renderEcharts4r({
    test |>
      e_charts(x = date) |>
      e_area(
        X1,
        name = "X1",
        x_index = 0,
        y_index = 1
      )|>
      e_line(
        X2,
        x_index = 0,
        y_index = 0,
        lineStyle = list(
          color = "#39558CFF",
          width = 2,
          opacity = 0.8
        )
      ) |>      
      e_line(
        X3,
        x_index = 0,
        y_index = 1,
        lineStyle = list(
          color = "#FA2B2B",
          width = 1.8,
          opacity = 0.7
        )
      ) |>
      e_line(
        X4,
        x_index = 0,
        y_index = 1,
        lineStyle = list(
          color = "#ED7D3A",
          width = 1.8,
          opacity = 0.8,
          type = "dotted"
        )
      )  |>
      e_datazoom(
        x_index = c(0, 1),
        toolbox = FALSE,
        start = dim(test)[1]-45,
        end = dim(test)[1]
      ) |>
      e_axis_labels(y = "test box") |>
      e_show_loading() |>
      e_tooltip(trigger = "axis") |>
      e_x_axis(date, axisPointer = list(show = TRUE,
                                        label = list(show = FALSE))) |>
      e_grid(left = 40, right = 40)
  })
}

shinyApp(ui = ui, server = server)