I have below interactive plot using highchart js library with R
library(highcharter)
set.seed(100)
Data = data.frame(x = round(rnorm(20) * 100, 2), y = round(rnorm(20) * 100, 2), z = letters[1:20])
hchart(Data, "scatter", hcaes(x, y)) %>%
hc_annotations(list(labelOptions = list(y = 35, x = 0, backgroundColor = 'rgba(0, 0, 0, 0)', borderColor = "rgba(0,0,0,0)"),
labels = list(list(point = list(x = 71, y = 55, xAxis = 0, yAxis = 0),
style = list(color = '#6f6f6f', fontSize = 8),
useHTML = TRUE,
text = "<span style = 'width: 120px; height: 120px; background-color: rgba(0,0,0,.5)'>AAAA</span>"))))
I wanted to style the text-annotation with HTML/CSS styling. But having that in above code, I see the tooltips are falling behind the text therefore not clearly visible. However if I put useHTML = FALSE then I cant apply CSS styling with the text. Is there any way to bring tooltip front to give higher priority for visualisation?
@raf18seb added that we should add - hc_tooltip(outside = TRUE)
But, if we add this and use highchart within a Shiny-app then tooltips become invisible. Below is such an App -
library("shiny")
library("highcharter")
library(shinyjs)
Data1 = structure(list(x = c(15, 21, 71, 39, 34, -47, 67, 5, 1, -41,
41, 6, 52, 84, 10, 67, -53, 15, 21, 51), y = c(-7, 75, 100, -67,
52, 100, 100, -200, 0, -100, 28, 19, 100, 35, 39, 24, -73, 100,
29, 81), z = c("a", "b", "c", "d", "e", "f", "g", "h", "i", "j",
"k", "l", "m", "n", "o", "p", "q", "r", "s", "t")), row.names = c(NA,
-20L), class = "data.frame")
ui <- fluidPage(
useShinyjs(),
div(id = "Click", style = "height: 500px; width: 500px; background-color: rgba(0,0,0,.4)", HTML("Click Here"))
)
server = function(input, output) {
onclick('Click', showModal(modalDialog(size = 'l', footer = NULL, easyClose = TRUE, highchartOutput("Result"))))
output$Result =
renderHighchart({
HighCharts_Plot =
hchart(Data1, "scatter", hcaes(x, y)) %>%
hc_chart(plotBorderWidth = 1, plotBorderColor = '#b4b4b4') %>%
hc_annotations(list(labelOptions = list(y = 35, x = 0, backgroundColor = 'rgba(0, 0, 0, 0)', borderColor = "rgba(0,0,0,0)"),
labels = list(list(point = list(x = (max(abs(range(Data1$x))) + 0)/2, y = 0, xAxis = 0, yAxis = 0),
style = list(color = '#6f6f6f', fontSize = 8),
useHTML = TRUE,
text = paste("<span style = '", "padding: 3px; background-color: rgba(0,0,0,.4)", "'>AAA AAA AAA AAA AAA </span>", sep = ""))))) %>%
hc_tooltip(outside = TRUE)
HighCharts_Plot
})
}
shinyApp(ui = ui, server = server)
Any pointer what is the right solution will be high helpful.
The answer is in the Highcharts docs: https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html-in-highcharts
When useHTML is true, the text is laid out as HTML on top of the chart. [...] It (label with useHTML) will always be laid out on top of all other SVG content. Specifically the tooltip may be rendered below the useHTML label. Since Highcharts v6.1.1 this can be avoided by setting tooltip.outside to true.
So the solution is:
hc_tooltip(outside = TRUE) %>%
edit: In your shiny app, the tooltip is not "invisible". It's there, but under the modal box (visible when you hover over the point near to top edge).
When you set tooltip.outside to true, then the tooltip is renderer outside of Highcharts container (in your case, outside of shiny-modal-wrapper container). I don't know shiny so I don't know how to move tooltip container into your modal box.
But, I came up with this workaround. You can set the tooltip.useHTML to true instead of tooltip.outside. You need to disable a default styling and define your own styles. Below is just an example (Value: 7), but you can reproduce the same styles as the original tooltip has.
library("shiny")
library("highcharter")
library(shinyjs)
Data1 = structure(list(x = c(39, 15, 21, 71, 39, 34, -47, 67, 5, 1, -41,
41, 6, 52, 84, 10, 67, -53, 15, 21, 51), y = c(0, -7, 75, 100, -67,
52, 100, 100, -200, 0, -100, 28, 19, 100, 35, 39, 24, -73, 100,
29, 81), z = c("a", "b", "c", "d", "e", "f", "g", "h", "i", "j",
"k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u")), row.names = c(NA,
-21L), class = "data.frame")
ui <- fluidPage(
useShinyjs(),
div(id = "Click", style = "height: 500px; width: 500px; background-color: rgba(0,0,0,.4)", HTML("Click Here"))
)
server = function(input, output) {
onclick('Click', showModal(modalDialog(size = 'l', footer = NULL, easyClose = TRUE, highchartOutput("Result"))))
output$Result =
renderHighchart({
HighCharts_Plot =
hchart(Data1, "scatter", hcaes(x, y)) %>%
hc_chart(plotBorderWidth = 1, plotBorderColor = '#b4b4b4') %>%
hc_annotations(list(labelOptions = list(y = 35, x = 0, backgroundColor = 'rgba(0, 0, 0, 0)', borderColor = "rgba(0,0,0,0)"),
labels = list(list(point = list(x = (max(abs(range(Data1$x))) + 0)/2, y = 50, xAxis = 0, yAxis = 0),
style = list(color = '#6f6f6f', fontSize = 8),
useHTML = TRUE,
text = paste("<span style = '", "padding: 3px; background-color: rgba(0,0,0,.4)", "'>AAA AAA AAA AAA AAA </span>", sep = ""))))) %>%
hc_tooltip(useHTML = TRUE, padding = 0, headerFormat = '', pointFormat = '<span style="padding: 5px; background: #f7f7f7;">Value: {point.y}<span>')
HighCharts_Plot
})
}
shinyApp(ui = ui, server = server)
API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormat https://api.highcharts.com/highcharts/tooltip.useHTML