0

I have created a line plot using highchart and I am looking to insert a background image to the plot. Referred to SO post R shiny: how to embed a background image in a plot created with rCharts / Highcharts? and tried adding plotBackgroundImage to the plot but it doesn't work.

        mtcars %>% 
  hchart(type = "line", plotBackgroundImage = "folder/image_name.jpg",
                   name = "Covid test", 
                   hcaes(x = wt, 
                        y = mpg, col = cyl))

UPDATE

Plot result without image background: enter image description here

Update2

Doesn't work for reading jpg from local directories:

highchart() %>% 
  hc_add_series(
    type = "line",
    data = mtcars, hcaes(x = wt, y = mpg)
  ) %>% 
   hc_chart(events = list(load = JS("function() {
      var chart = this; chart.update({
        chart: {
          type: 'line',
          plotBackgroundImage: 'E:/3. R/Covid19 clean data & app 2021-Apr-03/Covid 19 images/coronavirus-4972480_1920.jpg'
        }
      }); 
    }
    ")
  ))

enter image description here

works when read thro' url:

highchart() %>% 
  hc_add_series(
    type = "line",
    data = mtcars, hcaes(x = wt, y = mpg)
  ) %>% 
   hc_chart(events = list(load = JS("function() {
      var chart = this; chart.update({
        chart: {
          type: 'line',
          plotBackgroundImage: 'https://www.highcharts.com/samples/graphics/skies.jpg'
        }
      }); 
    }
    ")
  ))

enter image description here

Update3: I gave all Permissions for this folder and still not getting background Image enter image description here

ViSa
  • 1,563
  • 8
  • 30
  • You mean the path to this file is not working properly? – madepiet Apr 20 '21 at 07:21
  • the path is working but I am not getting an image background in the plot. I have also added `readJPEG` and tried `hchart(type = "line", plotBackgroundImage = readJPEG("Covid 19 images/coronavirus-4972480_1920.jpg")` just to make sure if Image is getting read or not but in this case plot is just processing and nothing appears. – ViSa Apr 20 '21 at 07:36

1 Answers1

1

Try this approach and let us know if it works now:

library('highcharter')
highchart() %>%
  hc_add_series(
    data = list(5, 4, 3, 5)
  ) %>%
  hc_chart(events = list(load = JS("function() {
      var chart = this; chart.update({
        chart: {
          type: 'line',
          plotBackgroundImage: 'https://www.highcharts.com/samples/graphics/skies.jpg'
        }
      }); 
    }
    ")
  ))

Useful links:

https://api.highcharts.com/highcharts/chart.plotBackgroundImage https://www.highcharts.com/blog/tutorials/working-with-highcharts-javascript-syntax-in-r/?fbclid=IwAR2BQSMAn67QbgwGjWK9MzjvmGEI3S5DABrUWq5ppPR7zxQ56ikXmwho8PQ

madepiet
  • 859
  • 1
  • 5
  • 7
  • Its only `working` when I am using a `url` for image but doesn't work when I use image from `local directory`. I have updated my post, see `Update2` – ViSa Apr 20 '21 at 08:23
  • This may be related to some access limitations, see a similar topic here: https://www.highcharts.com/forum/viewtopic.php?t=36359 It seems that this is not just a problem in R. – madepiet Apr 21 '21 at 10:13
  • Thanks @madepiet but I have tried again after giving all permissions for the image folder but still not getting the image. Not sure what other permissions it will require, see `Update3` section of the post. I think I will leave this here as it is not working !! – ViSa Apr 23 '21 at 08:06