Make e_radar and background image using e_image_g co-move when zooming browser

[johkemper]

In my app, I use the "e_radar" plot type. I add a background image to the radar plot using "e_image_g", as its also used in the example (at the bottom): https://echarts4r.john-coene.com/reference/graphic (though in that example with e_charts, e_scatter).

The problem is: if the using the app in different browsers, with different zoom parameters (e.g. 80% vs. 90% zoom in Chrome browser), the radar chart will adjust its size to the browser zoom, but the background image does not. Could anyone help me how I could make sure that the background image adjusts in the same way?

The relevant code snippet (I hope its ok to not show an example that is not entirely reproducible):

radar plot

output$radar <- renderEcharts4r({
  if (length(input$date_spw1) == 1 & length(input$date_spw2) == 0 & length(input$date_spw3) == 0 & length(input$date_spw4) == 0 & length(input$date_spw5) == 0) {
    if (!nrow(spw())) {
      return()
    }
    plot <- spw() %>%
      dplyr::mutate(
        variable = stringr::str_wrap(variable, 15)
      ) %>%
      e_charts(variable, renderer = "canvas") %>%
      e_radar(var1, name = paste(input$country_spw1, input$date_spw1), max = 7, radar = list(
        axisTick = list(show = FALSE), center = c("50%", "50%"), splitNumber = 7
      )) %>%
      e_radar_opts(
        center = c("50%", "50%"), nameGap = 5
      ) %>%
      e_tooltip() %>%
     # IMAGE OBJECT
      e_image_g(
        height = "50%",
        right = "center",
        top = "middle",
        style = list(
          image = "img/frame.png",
          width = 810, # 790
          height = 780, # 790
          opacity = 0.6, rotate = 90
        )
      ) %>%
      e_legend(orient = "vertical", right = 10, bottom = 0) %>%
      e_toolbox(left = "auto", bottom = "0", itemSize = 20, orient = "vertical") %>%
      e_toolbox_feature(feature = c("saveAsImage"), name = "Spiderweb_chart", type = "png") %>%
      # e_labels()%>%
      e_text_style(color = "#1269b0") %>%
      e_color(c(
        "#5fe9c5", "#fa5a74", "#ffb32a", "#1269b0", "#c90076", "#8fce00",
        "#1b684b", "#1f6676", "#571b1b", "#421655", "#343e04", "#5d3c08be", "#044213"
      ))
    plot
  } else if (length(input$date_spw1) == 1 & length(input$date_spw2) == 1 & length(input$date_spw3) == 0 & length(input$date_spw4) == 0 & length(input$date_spw5) == 0) {
    if (!nrow(spw())) {
      return()
    }

.....

I'd be grateful for help on this issue!

[JohnCoene]

Hi, do you mean the zoom functionality from the browser itself? That seems to make sense somewhat since you have specified the dimensions of the image in pixels (e.g.: width = 810).

Are these required? I've never really used this feature, maybe scaleX and scaleY could help

[johkemper]

Dear John! Thanks a lot for your answer! Yes, I mean the zoom functionality from the browser. True, what you write sounds logic. I need to relate the image to the size of the radar chart. Unfortunately, I have no idea how I can use your hint to modify my code accordingly. Do you have a suggestion? Thanks a lot in advance!

[JohnCoene]

You can pass scaleX (and Y) to e_image_g to change how the image scales: number between 0 and 1.

e_image_g(scaleX = .5, scaleY = .5)