Highcharter R formatting tooltip question

Question

I'm using Highcharter R library. I can make a nice chart with a pretty looking tooltip using this code:

library(flexdashboard)
library(tidyverse)
library(scales)
library(highcharter)
library(DT)
library(formattable)
library(zoo)

year <- c(2017, 2018, 2019, 2020, 2017, 2018, 2019, 2020, 2017, 2018, 2019, 2020, 2017, 2018, 2019, 2020)
drugType <- c('drug1', 'drug1', 'drug1', 'drug1', 'drug2', 'drug2', 'drug2', 'drug2', 'drug3', 'drug3', 'drug3', 'drug3', 'drug4', 'drug4', 'drug4', 'drug4')
total <- c(21, 18, 17, 10, 1, 1, 3, 4, 192, 242, 111, 234, 34, 26, 36, 17)
perCapitaRate <- c(1.4, 4.3, 3.4, 3.0, 23.0, 3.3, 3.4, 3.5, 3.6, 45.4, 4.4, 4.5, 23.6, 34.7, 22.3, 2.0)
drugDeathsByYr <- data.frame(year, drugType, total, perCapitaRate)


myChart <- hchart(drugDeathsByYr, "line", hcaes(x = year, y=total, group="drugType")) %>%
  hc_plotOptions(line = list(marker = list(enabled = FALSE, symbol="circle"))) %>%
  hc_xAxis(title = list(text = "Year")) %>%
  hc_yAxis(labels = list(format = "{value:,.0f}"), title = list(text = "# of Fatal Overdoses")) %>%
  hc_title(text = "Overdose Deaths, by Year")

myChart

Which gives me this tooltip:

But let's say I want to add a multi-line tooltip. I use this code, with the hc_tooltip parameter:

  myChart <- hchart(drugDeathsByYr, "line", hcaes(x = year, y=total, group="drugType")) %>%
      hc_plotOptions(line = list(marker = list(enabled = FALSE, symbol="circle"))) %>%
      hc_xAxis(title = list(text = "Year")) %>%
      hc_tooltip(formatter = JS("function(){
                                return ('Lender: ' + this.point.year + ' <br> Loan balance: ' + this.point.total)
                                }"))%>%
      hc_yAxis(labels = list(format = "{value:,.0f}"), title = list(text = "# of Fatal Overdoses")) %>%
      hc_title(text = "Overdose Deaths, by Year")
    
    myChart

Now, my popup looks like this:

In other words, it is multi-line like I wanted, but it loses the nice formatting (year header, color by group, etc).

How can I make my tooltip look like the first example (nice formatting) but have it be multiple lines? (i.e. showing multiple values).

Answer 1

Update:

To avoid the indention of the second row in the tooltip use this code:

hchart(drugDeathsByYr, "line", hcaes(x = year, y = total, group = "drugType")) %>%
  hc_plotOptions(line = list(marker = list(enabled = FALSE, symbol = "circle"))) %>%
  hc_xAxis(title = list(text = "Year")) %>%
  hc_tooltip(pointFormat = "
  <span style='color:{point.color}'>\u25CF</span>
  Lender: <b>{point.year}</b>
  <br/>
  <span style='color:{point.color}'>\u25CF</span>
  Loan balance: <b>{point.y}</b>") %>%
  hc_yAxis(labels = list(format = "{value:,.0f}"), title = list(text = "# of Fatal Overdoses")) %>%
  hc_title(text = "Overdose Deaths, by Year") 

First answer: Using hc_tooltip(pointFormat...

hchart(drugDeathsByYr, "line", hcaes(x = year, y = total, group = "drugType")) %>%
  hc_plotOptions(line = list(marker = list(enabled = FALSE, symbol = "circle"))) %>%
  hc_xAxis(title = list(text = "Year")) %>%
  hc_tooltip(pointFormat = "<span style='color:{point.color}'>\u25CF</span> 
             Lender: <b>{point.year}</b>
             <br/>
             <span style='color:{point.color}'>\u25CF</span> 
            Loan balance: <b>{point.y}</b>") %>%
  hc_yAxis(labels = list(format = "{value:,.0f}"), title = list(text = "# of Fatal Overdoses")) %>%
  hc_title(text = "Overdose Deaths, by Year")