Select/copy hover text in R plotly graph

Question

I would like to be able to select and copy the hover text in plotly graphs. Is that possible with the R API? For example, in this heatmap, upon mousing over coordinates (X=a, Y=d), one can see the hover text displaying:

x=a,

y=d,

z=0.71886

However, the text is not selectable. The goal would be to e.g. display this text inside a box (perhaps by right-clicking on the corresponding cell) to be able to copy the text contents into the clipboard. Any help would be greatly appreciated.

Answer 1

Here is another approach that can be considered :

library(stringr)
library(rmarkdown)

vec_Text <- c('```{r fig}',
              'library(plotly)',
              'set.seed(123454)',
              'm <- matrix(rnorm(9), nrow = 3, ncol = 3)',
              'fig <- plot_ly(x = c("a", "b", "c"),',
              '               y = c("d", "e", "f"),',
              '               z = m, type = "heatmap")',
              'fig',
              '```')

temp_Dir <- tempdir()
dir.create(temp_Dir)
file <- rpois(n = 1, lambda = 500)
temp_Rmd <- paste0(temp_Dir, "\\", file, ".Rmd")
temp_Html <- paste0(temp_Dir, "\\", file, ".html")
writeLines(text = vec_Text, con = temp_Rmd)
setwd(temp_Dir)
file_Rmd <- paste0(file, ".Rmd")
rmarkdown::render(input = file_Rmd,
                  output_format = "html_document",
                  output_file = temp_Html)

html_Text <- readLines(temp_Html)
html_Text <- paste0(html_Text, collapse = "")
text_With_Values <- unlist(stringr::str_extract_all(html_Text, "<script type=.{1,4000}<script>"))

text_With_Values
[1] "<script type=\"application/json\" data-for=\"htmlwidget-24b21bb57a3b5a28e228\">{\"x\":{\"visdat\":{\"2ea8298f79c2\":[\"function () \",\"plotlyVisDat\"]},\"cur_data\":\"2ea8298f79c2\",\"attrs\":{\"2ea8298f79c2\":{\"x\":[\"a\",\"b\",\"c\"],\"y\":[\"d\",\"e\",\"f\"],\"z\":[[-1.2462699907797248,0.36052924344838017,-1.399409390152403],[-0.051354636607780689,-2.0167467987144692,-0.44389252386516453],[0.13157783294716205,-0.078380677135129126,0.62009308748077607]],\"alpha_stroke\":1,\"sizes\":[10,100],\"spans\":[1,20],\"type\":\"heatmap\"}},\"layout\":{\"margin\":{\"b\":40,\"l\":60,\"t\":25,\"r\":10},\"xaxis\":{\"domain\":[0,1],\"automargin\":true,\"title\":[]},\"yaxis\":{\"domain\":[0,1],\"automargin\":true,\"title\":[]},\"scene\":{\"zaxis\":{\"title\":[]}},\"hovermode\":\"closest\",\"showlegend\":false,\"legend\":{\"yanchor\":\"top\",\"y\":0.5}},\"source\":\"A\",\"config\":{\"modeBarButtonsToAdd\":[\"hoverclosest\",\"hovercompare\"],\"showSendToCloud\":false},\"data\":[{\"colorbar\":{\"title\":\"\",\"ticklen\":2,\"len\":0.5,\"lenmode\":\"fraction\",\"y\":1,\"yanchor\":\"top\"},\"colorscale\":[[\"0\",\"rgba(68,1,84,1)\"],[\"0.0416666666666667\",\"rgba(70,19,97,1)\"],[\"0.0833333333333333\",\"rgba(72,32,111,1)\"],[\"0.125\",\"rgba(71,45,122,1)\"],[\"0.166666666666667\",\"rgba(68,58,128,1)\"],[\"0.208333333333333\",\"rgba(64,70,135,1)\"],[\"0.25\",\"rgba(60,82,138,1)\"],[\"0.291666666666667\",\"rgba(56,93,140,1)\"],[\"0.333333333333333\",\"rgba(49,104,142,1)\"],[\"0.375\",\"rgba(46,114,142,1)\"],[\"0.416666666666667\",\"rgba(42,123,142,1)\"],[\"0.458333333333333\",\"rgba(38,133,141,1)\"],[\"0.5\",\"rgba(37,144,140,1)\"],[\"0.541666666666667\",\"rgba(33,154,138,1)\"],[\"0.583333333333333\",\"rgba(39,164,133,1)\"],[\"0.625\",\"rgba(47,174,127,1)\"],[\"0.666666666666667\",\"rgba(53,183,121,1)\"],[\"0.708333333333333\",\"rgba(79,191,110,1)\"],[\"0.75\",\"rgba(98,199,98,1)\"],[\"0.791666666666667\",\"rgba(119,207,85,1)\"],[\"0.833333333333333\",\"rgba(147,214,70,1)\"],[\"0.875\",\"rgba(172,220,52,1)\"],[\"0.916666666666667\",\"rgba(199,225,42,1)\"],[\"0.958333333333333\",\"rgba(226,228,40,1)\"],[\"1\",\"rgba(253,231,37,1)\"]],\"showscale\":true,\"x\":[\"a\",\"b\",\"c\"],\"y\":[\"d\",\"e\",\"f\"],\"z\":[[-1.2462699907797248,0.36052924344838017,-1.399409390152403],[-0.051354636607780689,-2.0167467987144692,-0.44389252386516453],[0.13157783294716205,-0.078380677135129126,0.62009308748077607]],\"type\":\"heatmap\",\"xaxis\":\"x\",\"yaxis\":\"y\",\"frame\":null}],\"highlight\":{\"on\":\"plotly_click\",\"persistent\":false,\"dynamic\":false,\"selectize\":false,\"opacityDim\":0.20000000000000001,\"selected\":{\"opacity\":1},\"debounce\":0},\"shinyEvents\":[\"plotly_hover\",\"plotly_click\",\"plotly_selected\",\"plotly_relayout\",\"plotly_brushed\",\"plotly_brushing\",\"plotly_clickannotation\",\"plotly_doubleclick\",\"plotly_deselect\",\"plotly_afterplot\",\"plotly_sunburstclick\"],\"base_url\":\"https://plot.ly\"},\"evals\":[],\"jsHooks\":[]}</script></div><script>// add bootstrap table styles to pandoc tablesfunction bootstrapStylePandocTables() {  $('tr.odd').parent('tbody').parent('table').addClass('table table-condensed');}$(document).ready(function () {  bootstrapStylePandocTables();});</script><!-- tabsets --><script>$(document).ready(function () {  window.buildTabsets(\"TOC\");});$(document).ready(function () {  $('.tabset-dropdown > .nav-tabs > li').click(function () {    $(this).parent().toggleClass('nav-tabs-open');  });});</script><!-- code folding --><!-- dynamically load mathjax for compatibility with self-contained --><script>"

You have all the info in the variable text_With_Values. For example, you have

{\"x\":[\"a\",\"b\",\"c\"],\"y\":[\"d\",\"e\",\"f\"],\"z\":[[-1.2462699907797248,0.36052924344838017,-1.399409390152403],[-0.051354636607780689,-2.0167467987144692,-0.44389252386516453],[0.13157783294716205,-0.078380677135129126,0.62009308748077607]]