R Highcharter: Formatting tooltip

Question

I have a "stacked bar" chart and I put it against a wider bar to see if it fits in my criteria or not. I have the graph looking the way I want due to a trick (using grouping = FALSE and having the total of each column be the sum of the ones in front of it). The issue now is that the tooltip is showing incorrect numbers (correctly).

Question: Is there a way I can either format the tooltip to show what should be correct numbers (with color dot included) or create the graph in a different way?

For example, the picture shows the incorrect numbers on the tooltip, I want it to display:

• DIH Goal: 21hrs
• Quote Hold Time: 6.2hrs
• Other Hold Time: 19.3hrs
• Shop Time: 3.4 hrs

Code:

highchart() %>%
  hc_add_series(TopPN2, "column", hcaes(x = Incoming.P.N, y = 21), name = "DIH Goal", color = "#ffffff", borderColor = "#C8C8C8", pointPadding = -0.1) %>%
  hc_add_series(TopPN2, "column", hcaes(x = Incoming.P.N, y = round(HoldTime.Quote,1)), name = "Quote Hold Time", color = "#FF8888") %>%
  hc_add_series(TopPN2, "column", hcaes(x = Incoming.P.N, y = round(Hold.Time.Other,1)), name = "Other Hold Time", color = "#E5A919") %>%
  hc_add_series(TopPN2, "column", hcaes(x = Incoming.P.N, y = round(Shop.Time,1)), name = "Shop Time", color = "#51C1BC") %>%
  hc_xAxis(type = "category") %>%
  hc_yAxis(title = "hours", labels = list(format = "{value}hrs")) %>%
  hc_tooltip(crosshairs = TRUE, shared = TRUE, headerFormat = "<b>{point.name}</b>", valueSuffix = "hrs") %>%
  hc_plotOptions(column = list(grouping = FALSE))

Data:

> dput(TopPN2)
structure(list(Incoming.P.N = c("PN1", "PN2", "PN3", "PN4", "PN5", 
"PN6", "PN7", "PN8", "PN9", "PN10"), HoldTime.Quote = structure(c(28.8846153846154, 
32.548, 21.8717948717949, 57.4931506849315, 64.4074074074074, 
40.0833333333333, 14, 29.680790960452, 36.6506024096386, 48.1111111111111
), class = "difftime", units = "days"), Hold.Time.Other = structure(c(22.7307692307692, 
21.56, 16.7435897435897, 10.7123287671233, 47.1851851851852, 
23.1666666666667, 6, 8.17231638418079, 25.1807228915663, 24.6666666666667
), class = "difftime", units = "days"), Shop.Time = c(3.40698998178506, 
4.83416980342953, 3.33075767332046, 4.39068799583821, 5.35449386300647, 
5.20028749401054, 3.43263196751569, 5.59119496855346, 4.27753861737149, 
5.61884753901561), Quantity = c(17568, 9564, 9318, 7689, 7577, 
6261, 5418, 5088, 3949, 3332)), .Names = c("Incoming.P.N", "HoldTime.Quote", 
"Hold.Time.Other", "Shop.Time", "Quantity"), row.names = c(NA, 
-10L), class = c("tbl_df", "tbl", "data.frame"))

UPDATE

Going down the path of just formatting the tooltip. I have created new variables to represent the correct times but I cannot figure out how to input the correct color dots in the tooltip. The example found here: How to use the tooltip formatter and still display chart color (like it does by default)? shows how to do it in JS but I can't figure it out in R. My issue is I don't know how to use the double quotations between color span to make it pick up the correct color.

Updated Data:

> dput(TopPN2)
structure(list(Incoming.P.N = c("PN1", "PN2", "PN3", "PN4", "PN5", 
"PN6", "PN7", "PN8", "PN9", "PN10"), Hold.Time.Quote = structure(c(28.8846153846154, 
32.548, 21.8717948717949, 57.4931506849315, 64.4074074074074, 
40.0833333333333, 14, 29.680790960452, 36.6506024096386, 48.1111111111111
), class = "difftime", units = "days"), Hold.Time.Other = structure(c(22.7307692307692, 
21.56, 16.7435897435897, 10.7123287671233, 47.1851851851852, 
23.1666666666667, 6, 8.17231638418079, 25.1807228915663, 24.6666666666667
), class = "difftime", units = "days"), Shop.Time = c(3.40528709494031, 
4.83058282849384, 3.33075767332046, 4.38978424746556, 5.35178594965072, 
5.19380460683082, 3.43263196751569, 5.59119496855346, 4.27753861737149, 
5.61884753901561), Quantity = c(17590, 9574, 9318, 7694, 7587, 
6295, 5418, 5088, 3949, 3332), HoldTimeQuoteTrue = structure(c(6.2, 
11, 5.1, 46.8, 17.2, 16.9, 8, 21.5, 11.5, 23.4), class = "difftime", units = "days"), 
    HoldTimeOtherTrue = structure(c(18.8, 16.8, 13.7, 5.7, 38.6, 
    15.3, 0, 1.9, 20, 15.4), class = "difftime", units = "days"), 
    ShopTimeTrue = c(3.4, 4.8, 3.3, 4.4, 5.4, 5.2, 3.4, 5.6, 
    4.3, 5.6)), .Names = c("Incoming.P.N", "Hold.Time.Quote", 
"Hold.Time.Other", "Shop.Time", "Quantity", "HoldTimeQuoteTrue", 
"HoldTimeOtherTrue", "ShopTimeTrue"), row.names = c(NA, -10L), class = c("tbl_df", 
"tbl", "data.frame"))

Updated Code:

highchart() %>%
  hc_add_series(TopPN, "column", hcaes(x = Incoming.P.N, y = 21), name = "DIH Goal", color = "#ffffff", borderColor = "#C8C8C8", borderWidth = 2, pointPadding = -0.1, 
                tooltip = list(pointFormat = "DIH Goal: 21 days<br>")) %>%
  hc_add_series(TopPN, "column", hcaes(x = Incoming.P.N, y = round(Hold.Time.Quote,1)), name = "Quote Hold Time", color = "#FF8888", 
                tooltip = list(pointFormat = "<span style='color:{point.color}'>\u25CF</span> Quote Hold Time: {point.HoldTimeQuoteTrue} days<br>")) %>%
  hc_add_series(TopPN, "column", hcaes(x = Incoming.P.N, y = round(Hold.Time.Other,1)), name = "Other Hold Time", color = "#E5A919", 
                tooltip = list(pointFormat = "{point.color} Other Hold Time: {point.HoldTimeOtherTrue} days<br>")) %>%
  hc_add_series(TopPN, "column", hcaes(x = Incoming.P.N, y = round(Shop.Time,1)), name = "Shop Time", color = "#51C1BC", 
                tooltip = list(pointFormat = "Shop Time: {point.ShopTimeTrue} days<br>Volume: {point.Quantity}")) %>%
  hc_xAxis(type = "category") %>%
  hc_yAxis(title = "days", labels = list(format = "{value} days")) %>%
  hc_tooltip(crosshairs = TRUE, shared = TRUE, 
             headerFormat = "<b>PN {point.key}</b><br>"
             ) %>%
  hc_plotOptions(column = list(grouping = FALSE, events = list(click = ClickFunctionCustReviewPN)))

Answer 1

Rather than using your trick of a grouped column, have you considered using a plot line to illustrate your goal and how it relates to your data? Since your goal data is consistent, this could be a more readable indicator. And, since it's not a series in your chart, it wouldn't interfere with your tooltip.

Here's a modification of the Highcharts stacked column chart demo with a sample plot line: https://jsfiddle.net/brightmatrix/v3e7gouz/

yAxis: {
    ...
    plotLines: [{ 
        color: 'red', 
        value: 5, // the value on the y-axis were you want the line to appear
        width: 2, 
        zIndex: 1 // set this value to have the line appear above the y-axis gridline but below the column bars
    }],
    ...
}

I hope this is helpful for you.