Data, Code and Visualization - Minimalistic toolptips with highcharter/highcharts

Time ago we make some really nice but complex tooltips showing charts from the selected points using {highcharter} package (and highcharts) in the using tooltips in unexpected ways post. But sometimes we need less: a tiny toolip, maybe for have few available space, or maybe requirements.

So in this post we’ll detail the parameters in highcharter::hc_tooltip function used in the valuebox and sparklines post to get what we want.

First, let’s try a normal chart with a traditional tooltip.

Code

library(highcharter)
library(tidyverse)

hc <- hchart(citytemp_long, "line", hcaes(month, temp, group = city)) %>% 
  hc_add_theme(hc_theme_538()) 

hc

Did you see the tooltip? Is just a normal one, nothing special, it works :). Now, what we came for, but before change arguments let’s make clear what we’ll change:

The main one is give the text outline effect to the text.
Change the pointFormat argument removing the “:” in the text because the textOutline effect don’t work very well with this character.
Change the tooltip background setting the color to transparent.
Remove the border setting the borderWidth to 0.
Remove the shadow.

And voila.

Code

hc %>% 
  hc_tooltip(
    pointFormat = "<span  style='color: {series.color}'> {series.name} <b>{point.y}</b><br/></span>",
    shadow = FALSE,
    backgroundColor = "transparent",
    style = list(textOutline = "3px #404040"),
    borderColor = "transparent",
    borderWidth = 0
  )

Reuse

CC BY 4.0

Citation

BibTeX citation:

@online{kunst fuentes2021,
  author = {Kunst Fuentes, Joshua},
  title = {Minimalistic Toolptips with Highcharter/Highcharts},
  date = {2021-01-07},
  url = {https://jkunst.com/blog/posts/2021-01-07-minimalistic-toolptips-with-highcharter-and-highcharts},
  langid = {en}
}

For attribution, please cite this work as:

Kunst Fuentes, Joshua. 2021. “Minimalistic Toolptips with Highcharter/Highcharts.” January 7, 2021. https://jkunst.com/blog/posts/2021-01-07-minimalistic-toolptips-with-highcharter-and-highcharts.