Merge pull request #3 from plotly/hover-text

Hover text

Author: nicolaskruchten

r/2018-01-29-hover-text-and-formatting.Rmd

@@ -1,16 +1,16 @@
 ---
+name: Hover Text and Formatting
+permalink: r/hover-text-and-formatting/
 description: How to use hover text and formatting in R with Plotly.
-display_as: file_settings
-language: r
 layout: base
-name: Hover Text and Formatting
+thumbnail: thumbnail/hover-text.jpg
+language: r
+display_as: file_settings
 order: 7
+page_type: u-guide
 output:
   html_document:
     keep_md: true
-page_type: u-guide
-permalink: r/hover-text-and-formatting/
-thumbnail: thumbnail/hover-text.png
 ---
 
 ```{r, echo = FALSE, message=FALSE}
@@ -66,22 +66,20 @@ p <- plot_ly(type = 'scatter', mode = 'markers') %>%
     showlegend = F
   ) %>%
   layout(
-    title = "Set hover text formatting<br><a href= https://github.com/d3/d3-time-format/blob/master/README.md#locale_format>https://github.com/d3/d3-time-format/blob/master/README.md#locale_format</a>",
-    titlefont = list(
-      size = 10
-    ),
-    xaxis = list(
-      zeroline = F
-    ),
-    yaxis = list(
-      hoverformat = '.2f'
-    )
-  )
+    title = list(text="Set hover text formatting<br><a href= https://github.com/d3/d3-time-format/blob/master/README.md#locale_format>https://github.com/d3/d3-time-format/blob/master/README.md#locale_format</a>",
+      size = 10),
+    xaxis = list(zeroline = F),
+    yaxis = list(hoverformat = '.2f'))
 
 p
 ```
 
-#### Hovertemplate
+#### Customize Tooltip Text with a Hovertemplate
+
+To customize the tooltip on your graph you can use [hovertemplate](https://plot.ly/r/reference/#pie-hovertemplate), which is a template string used for rendering the information that appear on hoverbox.
+This template string can include `variables` in %{variable} format, `numbers` in [d3-format's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_forma), and `date` in [d3-time-fomrat's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format).
+Hovertemplate customize the tooltip text vs. [texttemplate](https://plot.ly/r/reference/#pie-texttemplate) which customizes the text that appears on your chart. <br>
+Set the horizontal alignment of the text within tooltip with [hoverlabel.align](https://plot.ly/r/reference/#layout-hoverlabel-align).
 
 ```{r}
 library(plotly)
@@ -110,6 +108,21 @@ p <- plot_ly() %>%
 p
 ```
 
+```{r}
+library(plotly)
+p <-  plot_ly() %>%
+  add_trace(
+    type = "pie",
+    name = "",
+    values = c(2, 1, 3, 2.5),
+    labels = c("R", "Python", "Java Script", "Matlab"),
+    text = c("textA", "TextB", "TextC", "TextD"),
+    hovertemplate = "%{label}: <br>Popularity: %{percent} </br> %{text}")
+
+
+p
+```
+
 #### Advanced Hovertemplate
 
 ```{r}
@@ -141,4 +154,4 @@ p
 
 #### Reference
 
-See [https://plot.ly/r/reference/](https://plot.ly/r/reference/) for more information and options!
+See [https://plot.ly/r/reference/](https://plot.ly/r/reference/) for more information and options!