How to add margins around echarts4r plots to fit axis names?

Question

I am trying to make a plot using echarts4r and when I add axis labels they are either too close or outside of the plot when padding is added. This issue also occurs when I try to add the plot to a quarto revealjs presentation. Is it possible to increase the margins around the plot so that it can fit the axes labels? A reproducible example is below:

My data

df <- data.frame(
  x = seq(50),
  y = rnorm(50, 10, 3),
  z = rnorm(50, 11, 2),
  w = rnorm(50, 9, 2)
)

This works but the axis labels and axis names are overlapping:

library(echarts4r)
df |>
  e_charts(x) |>
  e_line(z) |>
  e_hide_grid_lines(which = c("x", "y")) |>
  e_x_axis(
    name = "X axis name",
    nameLocation = "center",
    nameTextStyle = list(fontSize = 35),
    type = 'value',
    min = 5, 
    max = 21, 
    axisLabel = list(fontSize = 25),
    axisLine = list(onZero = FALSE, lineStyle = list(width = 2))
  ) |>
  e_y_axis(
    name = "Y axis name",
    nameLocation = "center",
    nameTextStyle = list(fontSize = 35),
    type = 'value',
    min = -2, 
    max = 15, 
    axisLabel = list(fontSize = 25),
    axisLine = list(lineStyle = list(width = 2))
  ) |>
  e_legend(textStyle = list(fontSize = 35))

In this case the axis names goes out of the plot:

df |>
  e_charts(x) |>
  e_line(z) |>
  e_hide_grid_lines(which = c("x", "y")) |>
  e_x_axis(
    name = "X axis name",
    nameLocation = "center",
    nameTextStyle = list(fontSize = 35, padding = c(30, 0, 0, 0)),
    type = 'value',
    min = 5, 
    max = 21, 
    axisLabel = list(fontSize = 25),
    axisLine = list(onZero = FALSE, lineStyle = list(width = 2))
  ) |>
  e_y_axis(
    name = "Y axis name",
    nameLocation = "center",
    nameTextStyle = list(fontSize = 35, padding = c(0, 0, 30, 0)),
    type = 'value',
    min = -2, 
    max = 15, 
    axisLabel = list(fontSize = 25),
    axisLine = list(lineStyle = list(width = 2))
  ) |>
  e_legend(textStyle = list(fontSize = 35))

Answer 1

You could increase the margin around the plot via e_grid.

From the docs the margins are by default set to

• left="10%"
• top=60
• right="10%"
• bottom=60

Hence, to account of the padding around the axis name you could increase the bottom margin to 90 and on the left to e.g. "15%" :

library(echarts4r)

set.seed(123)

df |>
  e_charts(x) |>
  e_line(z) |>
  e_hide_grid_lines(which = c("x", "y")) |>
  e_x_axis(
    name = "X axis name",
    nameLocation = "center",
    nameTextStyle = list(
      fontSize = 35,
      padding = c(30, 0, 0, 0)
    ),
    type = "value",
    min = 5,
    max = 21,
    axisLabel = list(fontSize = 25),
    axisLine = list(onZero = FALSE, lineStyle = list(width = 2))
  ) |>
  e_y_axis(
    name = "Y axis name",
    nameLocation = "center",
    nameTextStyle = list(
      fontSize = 35, padding = c(0, 0, 30, 0)
    ),
    type = "value",
    min = -2,
    max = 15,
    axisLabel = list(fontSize = 25),
    axisLine = list(lineStyle = list(width = 2))
  ) |>
  e_legend(textStyle = list(fontSize = 35)) |>
  e_grid(left = "15%", bottom = "90")

Answer 2

Seems all you need to do is adjust the padding arguments for the x and y axis.

df |>
    e_charts(x) |>
    e_line(z) |>
    e_hide_grid_lines(which = c("x", "y")) |>
    e_x_axis(
        name = "X axis name",
        nameLocation = "center",
        nameTextStyle = list(fontSize = 35, padding = c(20, 0, 0, 0)),
        type = 'value',
        min = 5, 
        max = 21, 
        axisLabel = list(fontSize = 25),
        axisLine = list(onZero = FALSE, lineStyle = list(width = 1.5))
    ) |>
    e_y_axis(
        name = "Y axis name",
        nameLocation = "center",
        nameTextStyle = list(fontSize = 35, padding = c(0, 0, 15, 0)),
        type = 'value',
        min = -2, 
        max = 15, 
        axisLabel = list(fontSize = 25),
        axisLine = list(lineStyle = list(width = 1))
    ) |>
    e_legend(textStyle = list(fontSize = 35))