Highcharter R库：如何保留默认Tooltip格式并实现多行显示

要同时保留默认Tooltip的年份标题、分组颜色标识，又能添加自定义字段（如total和perCapitaRate）的多行显示，关键是利用Highcharts的JS API复用默认Tooltip的HTML结构，再插入自定义内容，而非完全重写formatter。

核心思路 #

• 调用this.headerFormatter()获取默认的年份标题部分
• 遍历每个数据点，保留默认的彩色标记和系列名称，再追加自定义字段内容
• 用HTML拼接所有内容，确保样式和默认Tooltip一致

完整代码示例 #

library(highcharter)
library(dplyr)

# 构造模拟 overdose 数据
set.seed(123)
overdose_data <- expand.grid(
  year = 2015:2023,
  drugType = c("Opioids", "Stimulants", "Sedatives")
) %>%
  mutate(
    deaths = sample(5000:20000, n(), replace = TRUE),
    total = deaths + sample(1000:5000, n(), replace = TRUE),
    perCapitaRate = round(deaths / 100000 * sample(5:20, n(), replace = TRUE), 2)
  )

# 绘制折线图并配置Tooltip
highchart() %>%
  hc_xAxis(categories = unique(overdose_data$year)) %>%
  hc_add_series(
    data = overdose_data %>% filter(drugType == "Opioids"),
    type = "line",
    hcaes(x = year, y = deaths, total = total, perCapitaRate = perCapitaRate),
    name = "Opioids"
  ) %>%
  hc_add_series(
    data = overdose_data %>% filter(drugType == "Stimulants"),
    type = "line",
    hcaes(x = year, y = deaths, total = total, perCapitaRate = perCapitaRate),
    name = "Stimulants"
  ) %>%
  hc_add_series(
    data = overdose_data %>% filter(drugType == "Sedatives"),
    type = "line",
    hcaes(x = year, y = deaths, total = total, perCapitaRate = perCapitaRate),
    name = "Sedatives"
  ) %>%
  hc_tooltip(
    useHTML = TRUE,  # 允许Tooltip使用HTML内容
    formatter = JS("function() {
      // 获取默认的年份标题
      var header = this.headerFormatter();
      var pointContent = '';
      
      // 遍历每个数据点，拼接默认样式+自定义字段
      this.points.forEach(function(point) {
        // 保留默认的彩色标记和系列名称
        var defaultPart = '<span style=\"color:' + point.color + '\">●</span> ' + point.series.name + ': ';
        // 添加自定义多行内容
        var customPart = '<br/>  死亡数: ' + point.y + 
                         '<br/>  总计: ' + point.point.total + 
                         '<br/>  人均率: ' + point.point.perCapitaRate + ' per 100k';
        pointContent += defaultPart + customPart + '<br/>';
      });
      
      // 组合标题和内容
      return header + pointContent;
    }")
  ) %>%
  hc_title(text = "Overdose Deaths by Drug Type (2015-2023)") %>%
  hc_yAxis(title = list(text = "Number of Deaths"))

代码说明 #

1. 数据绑定：通过hcaes()将total和perCapitaRate绑定到每个数据点，在JS的formatter里可通过point.point.total访问这些字段。
2. useHTML = TRUE：必须开启该参数，才能在Tooltip中使用HTML标签保留样式和实现换行。
3. 复用默认标题：this.headerFormatter()直接生成默认的年份标题，保留原有样式结构。
4. 保留彩色标记：通过point.color获取系列颜色，用<span>生成对应颜色的圆点标记，和默认Tooltip样式一致。
5. 自定义多行内容：用<br/>实现换行，添加需要展示的自定义字段。

这样配置后，Tooltip既会保留默认的年份标题、分组颜色标识，又能显示自定义的多行字段内容。

内容的提问来源于stack exchange，提问作者DiamondJoe12