R Shiny - Highcharts: Tooltip delay before display - r

Question

On my highchart plot in an R shiny application I need a delay before the series tooltip is displayed,
i.e. I want the tooltip to wait some time before appearing, instead of appearing instantly when the mouse is hover the element.
Any solutions for this issue?
Thanks in advance:)
library("shiny")
library("highcharter")
ui <- fluidPage(
h1("Highcharter Example"),
fluidRow(
column(width = 8,
highchartOutput("hchart",height = "500px")
)
)
)
server <- function(input, output) {
output$hchart <- renderHighchart({
hc <- highchart() %>%
hc_chart(type = "area", plotBorderWidth = 0.5) %>%
hc_xAxis(lineWidth = 1, gridLineWidth = 0, minorGridLineWidth = 0, labels = list(format = '{value}%')) %>%
hc_add_series(name = 'Dummy', data = list(list(y = 4, z = 2), list(y = 5, z = 0), list(y = 6, z = 1), list(y = 7, z = 1), list(y = 8, z = 1))) %>%
hc_plotOptions(line = list(
dataLabels = list(enabled = TRUE),
enableMouseTracking = TRUE
)
)
return(hc)
})
}
shinyApp(ui = ui, server = server)

Answer 1

I came across this example http://rudovjan.github.io/highcharts-tooltip-delay/ which we can use to solve your problem.we are going to set the delayForDisplay at 2 secs. As a reference I am going to post the JS script here too just in case if he deletes it
rm(list = ls())
library("shiny")
library("highcharter")
ui <- fluidPage(
h1("Highcharter Example"),
fluidRow(
tags$script(src="http://rudovjan.github.io/highcharts-tooltip-delay/tooltip-delay.js"),
column(width = 8,
highchartOutput("hchart",height = "500px")
)
)
)
server <- function(input, output) {
output$hchart <- renderHighchart({
hc <- highchart() %>%
hc_chart(type = "area", plotBorderWidth = 0.5) %>%
hc_xAxis(lineWidth = 1, gridLineWidth = 0, minorGridLineWidth = 0, labels = list(format = '{value}%')) %>%
hc_add_series(name = 'Dummy', data = list(list(y = 4, z = 2), list(y = 5, z = 0), list(y = 6, z = 1), list(y = 7, z = 1), list(y = 8, z = 1))) %>%
hc_plotOptions(line = list(
dataLabels = list(enabled = TRUE),
enableMouseTracking = TRUE
)
)
hc <- hc_tooltip(hc,useHTML = T,delayForDisplay = 2000,hideDelay= 1)
return(hc)
})
}
shinyApp(ui = ui, server = server)
(function(H) {
let timerId = {};
const generatePointsUniqueKey = (points) => {
const generatePointKey = (point) => {
return point.category + " " + point.series.name + ": " + point.x + " " + point.y;
};
const result = points.map(generatePointKey).join(', ');
return result;
}
H.wrap(H.Tooltip.prototype, 'refresh', function(proceed) {
let seriesName;
if (Array.isArray(arguments[ 1 ])) {
// Can be array in case that, it's shared tooltip
seriesName = generatePointsUniqueKey(arguments[ 1 ]);
} else {
seriesName = arguments[ 1 ].series.name;
}
const delayForDisplay = this.chart.options.tooltip.delayForDisplay ? this.chart.options.tooltip.delayForDisplay : 1000;
if (timerId[ seriesName ]) {
clearTimeout(timerId[ seriesName ]);
delete timerId[ seriesName ];
}
timerId[ seriesName ] = window.setTimeout(function() {
let pointOrPoints = this.refreshArguments[ 0 ];
if (pointOrPoints === this.chart.hoverPoint || $.inArray(this.chart.hoverPoint, pointOrPoints) > -1) {
proceed.apply(this.tooltip, this.refreshArguments);
}
}.bind({
refreshArguments: Array.prototype.slice.call(arguments, 1),
chart: this.chart,
tooltip: this
}), delayForDisplay);
});
}(Highcharts));