CODEWITHSUNDEEP
rhighchartsshiny
Dereck
Dereck

Reputation: 5

R Shiny - Highcharts: Tooltip delay before display

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)

Upvotes: 0

Views: 433

Answers (1)

Pork Chop
Pork Chop

Reputation: 29387

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)

enter image description here

(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));

Upvotes: 1

Related Questions