hchart() doesn't respect out.width in RMarkdown chunks

[charliejhadley]

Unlike other htmlwidgets, hchart() does not resize according to the out.width code chunk option

---
title: "Untitled"
output: html_document
editor_options: 
  chunk_output_type: console
---


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library("tidyverse")
library("highcharter")
library("palmerpenguins")
library("plotly")
library("leaflet")
```

# highcharter

```{r, out.width="50%"}
penguins %>% 
  hchart(type = "scatter",
         hcaes(x = bill_length_mm,
               y = bill_depth_mm,
               group = species))
```

# plotly

```{r, out.width="50%"}
penguins %>% 
  plot_ly() %>% 
  add_trace(type = "scatter",
            x = ~bill_length_mm,
            y = ~bill_depth_mm,
            color = ~species)
```

# leaflet

```{r, out.width="50%"}
quakes %>% 
  leaflet() %>% 
  addTiles() %>% 
  addCircleMarkers()
```

Session Info

> sessionInfo()
R version 4.0.3 (2020-10-10)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS Big Sur 10.16

Matrix products: default
LAPACK: /Library/Frameworks/R.framework/Versions/4.0/Resources/lib/libRlapack.dylib

locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
 [1] leaflet_2.0.4.1       palmerpenguins_0.1.0  plotly_4.9.3          scales_1.1.1          fivethirtyeight_0.6.1 highcharter_0.8.2     forcats_0.5.1        
 [8] stringr_1.4.0         dplyr_1.0.5           purrr_0.3.4           readr_1.4.0           tidyr_1.1.3           tibble_3.1.0          ggplot2_3.3.3        
[15] tidyverse_1.3.1      

loaded via a namespace (and not attached):
 [1] httr_1.4.2         jsonlite_1.7.2     viridisLite_0.4.0  R.utils_2.10.1     modelr_0.1.8       assertthat_0.2.1   TTR_0.24.2         cellranger_1.1.0  
 [9] yaml_2.2.1         pillar_1.6.0       backports_1.2.1    lattice_0.20-41    glue_1.4.2         rlist_0.4.6.1      digest_0.6.27      RColorBrewer_1.1-2
[17] rvest_1.0.0        colorspace_2.0-0   htmltools_0.5.1.1  R.oo_1.24.0        pkgconfig_2.0.3    broom_0.7.6        haven_2.3.1        styler_1.4.1      
[25] generics_0.1.0     farver_2.0.3       listviewer_3.0.0   ellipsis_0.3.1     withr_2.4.1        widgetframe_0.3.1  lazyeval_0.2.2     cli_2.4.0         
[33] quantmod_0.4.18    magrittr_2.0.1     crayon_1.4.1       readxl_1.3.1       evaluate_0.14      R.methodsS3_1.8.1  fs_1.5.0           fansi_0.4.2       
[41] R.cache_0.14.0     xts_0.12.1         xml2_1.3.2         tools_4.0.3        data.table_1.14.0  hms_1.0.0          lifecycle_1.0.0    munsell_0.5.0     
[49] reprex_2.0.0       compiler_4.0.3     tinytex_0.31       rlang_0.4.10       grid_4.0.3         rstudioapi_0.13    htmlwidgets_1.5.3  crosstalk_1.1.1   
[57] igraph_1.2.6       rmarkdown_2.7      labeling_0.4.2     gtable_0.3.0       DBI_1.1.1          curl_4.3           R6_2.5.0           zoo_1.8-9         
[65] lubridate_1.7.10   knitr_1.32         utf8_1.2.1         stringi_1.5.3      Rcpp_1.0.6         vctrs_0.3.7        dbplyr_2.1.1       tidyselect_1.1.0  
[73] xfun_0.22         

[py9mrg]

Hello @charliejhadley, I just came across a similar problem. A partial fix is to send a width option to the HighCharts library itself, using hc_chart. Something like:

library("tidyverse")
library("highcharter")
#> Registered S3 method overwritten by 'quantmod':
#>   method            from
#>   as.zoo.data.frame zoo
#> Highcharts (www.highcharts.com) is a Highsoft software product which is
#> not free for commercial and Governmental use
library("palmerpenguins")

penguins %>% 
  hchart(type = "scatter",
         hcaes(x = bill_length_mm,
               y = bill_depth_mm,
               group = species)) %>% 
  hc_chart(
    width = 400
  )

^{Created on 2021-04-27 by the reprex package (v2.0.0)}

See here - but I can't get it to accept anything other than a number of pixels (i.e. "50%" gives something weird), but I haven't read the documentation very thoroughly.

[GregorDeCillia]

I just ran into the same issue. This used to work in a prior version of highcharter.

[jbkunst]

Hi @charliejhadley !

Sorry for my late response.

Can you test the fix please?

---
title: "Untitled"
output: html_document
editor_options: 
  chunk_output_type: console
---


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library("tidyverse")
library("highcharter")
library("palmerpenguins")
library("plotly")
library("leaflet")

highcharter

penguins %>% 
  hchart(type = "scatter",
         hcaes(x = bill_length_mm,
               y = bill_depth_mm,
               group = species))

penguins %>% 
  hchart(type = "scatter",
         hcaes(x = bill_length_mm,
               y = bill_depth_mm,
               group = species))

![image](https://user-images.githubusercontent.com/56481/118182069-8fc83c00-b406-11eb-9549-c1dec2562a60.png)

[charliejhadley]

This works perfectly @jbkunst, thanks!

[GregorDeCillia]

This fix works for me as well. Thanks @jbkunst !