Code
library(highcharter)
library(tidyverse)
hc <- hchart(citytemp_long, "line", hcaes(month, temp, group = city)) %>%
hc_add_theme(hc_theme_538())
hc
Joshua Kunst Fuentes
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.
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:
pointFormat
argument removing the “:” in the text because the textOutline
effect don’t work very well with this character.borderWidth
to 0.And voila.
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
)
@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}
}