Minimalistic toolptips with highcharter/highcharts

One of the many post to remember things that usually forget. Yes, this blog is for that.
minipost
highcharts
highcharter
Author

Joshua Kunst Fuentes

Published

January 7, 2021

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:

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

Citation

BibTeX citation:
@online{kunstfuentes2021,
  author = {Joshua Kunst Fuentes},
  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:
Joshua Kunst Fuentes. 2021. “Minimalistic Toolptips with Highcharter/Highcharts.” January 7, 2021. https://jkunst.com/blog/posts/2021-01-07-minimalistic-toolptips-with-highcharter-and-highcharts.