Mixing xaringan & highcharter

[Roberto Gil-Saura]

Hi @gadenbuie and colleagues. I search in stackoverflow and other places without solution ...

I have a transversal problem with rmarkdown/xaringan and highcharter. I'm trying to display slides with a highcharter object. In xAxis of the chart, there are images. These images are displayed in rstudio (console / inline) or in flexdashboard, but if I knit document, PDF or HTML result didn't show it.

I'm not a developer, and I don't detect what is the problem. I paste my code and I would appreciate any help that would allow me to obtain the graphics with the images.

Thanks in advance.

Robert

---
title: "Prueba"
subtitle: "Imagenes en x"  
date: "Última actualización: `r Sys.Date()`"
output:
  xaringan::moon_reader:
    self_contained: true
    nature:
      slideNumberFormat: "%current%"
      highlightStyle: github
      highlightLines: true
      ratio: 16:9
      countIncrementalSlides: true
---


```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
knitr::opts_chunk$set(
  fig.width=8, fig.height=4.5, fig.retina=3,
  out.width = "98%",
  cache = FALSE,
  echo = FALSE,
  message = FALSE, 
  warning = FALSE,
  hiline = TRUE
)
library(highcharter)
library(xaringanthemer)
library(xaringanExtra)
```

```{r xaringan-themer, include=FALSE, warning=FALSE}
style_duo_accent(
  primary_color = "#086677",
  secondary_color = "#EB6909",
  inverse_header_color = "#FFFFFF",
  header_font_family = 'Roboto Medium',
  text_font_size= '0.8rem',
  code_font_size='0.7rem',
  code_inline_font_size='0.7rem',
  code_font_family= 'Courier New'
)
use_logo(image_url = "https://download.tesigandia.com/imagenes/logocis.png")
google_font("Roboto", "400", "400i", "600i", "700")
```

Primera


---
Segunda

```{r}
x <- c(1,2,3,1,2,3,1,2,3,1,2,3)
y <- c(3,5,3,2,1,2,1,3,5,1,3,4)
logo <- c('psoe.png', 'pp.png', 'up.png','psoe.png', 'pp.png', 'up.png','psoe.png', 'pp.png', 'up.png','psoe.png', 'pp.png', 'up.png')
df <- data.frame(name=x,value=y, logo=logo)
hchart(df, 'column', hcaes(x=name, y=value)) %>%
     hc_xAxis(categories = paste('<img src="https://download.tesigandia.com/cis/',df$logo,'")>', sep=''), labels=list(style=list(fontSize='0.8em'), useHTML=TRUE))
```

---
background-image: url(https://download.tesigandia.com/imagenes/logoCIS.png)

[Garrick Aden-Buie]

Can you share a screenshot of what you see and what you expect to see?

Does it work if you remove xaringanthemer and xaringanExtra?

[Roberto Gil-Saura]

A lot of thanks for your answer @gadenbuie ...

If I remove xaringan? packages, it doesn't work either

• image1.png Output chunk in Viewer
  
• image2.png Output xaringan in Viewer
  

Regards

[Garrick Aden-Buie]

Here's a solution that uses JavaScript to write the labels via the formatter item in the labels list given to hc_xAxis(). For some reason, the entire x-axis labels area has zero width when used in xaringan slides, so you also need to add the css block at one time in your slides so that it has the correct height. The advantage of this approach, btw is that you can store the party name in the data frame and use the party name as alt text of the image for screen readers. This is a bit easier to work with than trying to add the image as a column in the data frame.

```{r}
x <- c(1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3)
y <- c(3, 5, 3, 2, 1, 2, 1, 3, 5, 1, 3, 4)
party <- c("psoe", "pp", "up")
df <- data.frame(name = factor(x, labels = party), value = y)
df <- df[order(df$name), ]
hchart(df, "column", hcaes(x = name, y = value)) %>%
  hc_xAxis(
    type = "category",
    labels = list(
      formatter = JS('function() { return `<img alt="${this.value.toUpperCase()}" src="https://download.tesigandia.com/cis/${this.value}.png" height="40px">` }'),
      align = "center",
      reserveSpace = TRUE,
      x = -20, # move label back to center
      useHTML = TRUE
    )
  )
```

```{css echo=FALSE}
.highcharts-xaxis-labels {
  width: 100%;
}
```

[Garrick Aden-Buie]

Btw, this isn't a problem with xaringanthemer or xaringanExtra. If you run into further issues, I suggest you report them in the highcharter or xaringan repos.

[Roberto Gil-Saura]

Thanks for your help, @gadenbuie . I will.

PD. Yesterday, I post my issue in stackoverflow with tags about it.