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

Question

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.

score 2 · Accepted Answer · answered Mar 19 '23 at 11:03

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)

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

1 Answers1

Linked