Highcharter R中工具提示与坐标轴日期格式设置求助

Got it, let's resolve this date timestamp problem and fix the tooltip in your highcharter chart. The root issue is that Highcharts wasn't explicitly told your x-axis data is datetime type, and the default tooltip doesn't parse those timestamps back to readable dates automatically. Here's the corrected code with explanations:

Corrected Code #

library(highcharter)

# Create and prepare your dataset
datasample <- data.frame(
  month = c("2020-01-01","2020-02-01","2020-03-01"), 
  sales = c(10000,15000,2000), 
  margin = c(0.34,0.33,0.31)
)
datasample$month <- as.Date(datasample$month)

# Build the corrected chart
highchart() %>% 
  # 1. Define x-axis as datetime type and set label format
  hc_xAxis(
    type = "datetime",
    labels = list(format = '{value:%m %Y}')
  ) %>% 
  # 2. Configure dual y-axes with clear titles
  hc_yAxis_multiples( 
    list(lineWidth = 3, title = list(text = "Sales Amount")), 
    list(showLastLabel = FALSE, opposite = TRUE, title = list(text = "Profit Margin"))
  ) %>% 
  # 3. Add sales area series
  hc_add_series(
    datasample, 
    hcaes(x = month, y = sales), 
    yAxis=0, 
    type = "area", 
    name = "Sales"
  ) %>% 
  # 4. Add margin line series
  hc_add_series(
    datasample, 
    hcaes(x = month, y = margin), 
    yAxis=1, 
    type = "line", 
    name = "Margin"
  ) %>% 
  # 5. Custom tooltip to format dates and values properly
  hc_tooltip(
    formatter = JS("function() {
      // Format the date from timestamp to 'MM YYYY'
      const dateLabel = Highcharts.dateFormat('%m %Y', this.x);
      // Format value based on series: add $ for sales, 2 decimals for margin
      const valueLabel = this.series.name === 'Sales' 
        ? '$' + Highcharts.numberFormat(this.y, 0) 
        : this.y.toFixed(2);
      return `<b>${dateLabel}</b><br/>${this.series.name}: ${valueLabel}`;
    }")
  )

Key Fixes Explained #

• Explicit Datetime X-Axis: Adding type = "datetime" to hc_xAxis tells Highcharts to treat your date values as datetime objects instead of raw timestamps, which fixes the axis label issue at its source.
• Custom Tooltip Formatter: The hc_tooltip uses a JavaScript function to:
  • Parse the timestamp back to a readable "MM YYYY" date using Highcharts.dateFormat
  • Format values appropriately for each series (dollar sign for sales, two decimal places for margin)
• Clearer Y-Axis Titles: Added titles to each y-axis to make the chart more intuitive for viewers.

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