HighcharteR multiple tooltips open with hideDelay

Question

Basically I'm trying to make the tooltips stay around for a few seconds and not close when hovering on another region, i.e., to leave a trail of old open tooltips like in this example

Test data:

require(dplyr)
require(highcharter)

mapdata <- get_data_from_map(download_map_data("countries/us/us-all"))
set.seed(1234)

data_fake <- mapdata %>% 
  select(code = `hc-a2`) %>% 
  mutate(value = 1e5 * abs(rt(nrow(.), df = 10)))

hcmap("countries/us/us-all", data = data_fake, value = "value",
      joinBy = c("hc-a2", "code"), name = "Fake data",
      dataLabels = list(enabled = TRUE, format = "{point.name}"),
      borderColor = "#FAFAFA", borderWidth = 0.1,
      tooltip = list(valueDecimals = 2, valuePrefix = "$", valueSuffix = "USD", 
hideDelay = 3, followPointer = F))

I found the option for hideDelay, but is there an option to make the tooltip stay alive (without closing) when hovering another region? Is there an option for that, or maybe a custom tooltip function exists?

Alternatively, a solution with tooltip-on-click would help too, it there was an option specify that old tooltips wouldn't close upon another click.

Here is how you could do it in javascript: jsfiddle.net/highcharts/yrpv0kuc — ewolden
@ewolden thanks, not sure it renders correctly for me though on jsfiddle. I'm seeing the tooltip fixed on the right side and not at all moving. — runr
That would be the tooltip.positioner, here is the same without that; jsfiddle.net/ewolden/7bsx5zug. This is all that is needed in the example to disable hiding tooltip: Highcharts.Tooltip.prototype.hide = function () {}; — ewolden
@ewolden but when sliding quickly through values there is no trail of old tooltips. I'm looking for something like in the presented example, try quickly moving the mouse around the map, the image should look something like this, with a trail of more than one open tooltip. — runr
@ewolden as a side note, viewing at the page source, they seem to achieve this by plotting every state as a new map? I.e., mapIt('nf','Newfoundland and Labrador', 44,56 ,1.2,1.5, '10'); mapIt('pe','Prince Edward Island', 0,100 ,0,0.2, '30'); and so on, where mapIt is a function mapIt(province, title, data1, data2, price1, price2, dis) { $('.'+province).highcharts. Maybe that's the key? — runr

raf18seb raf18seb · Accepted Answer · 2018-12-06T14:54:28

As @ewolden suggested, you can wrap Highcharts.Tooltip.prototype.updatePosition function. To make it work in R, you can wrap this function in chart.load event like in this example:

require(dplyr)
require(highcharter)

mapdata <- get_data_from_map(download_map_data("countries/us/us-all"))
set.seed(1234)

data_fake <- mapdata %>% 
  select(code = `hc-a2`) %>% 
  mutate(value = 1e5 * abs(rt(nrow(.), df = 10)))

hcmap("countries/us/us-all", data = data_fake, value = "value",
      joinBy = c("hc-a2", "code"), name = "Fake data",
      tooltip = list(followPointer = F), chart = list(
        events = list(
          load = JS("Highcharts.Tooltip.prototype.updatePosition = function(point) {
                var chart = this.chart,
                label = this.getLabel(),
                pos = (this.options.positioner || this.getPosition).call(
                this,
                label.width,
                label.height,
                point
                ),
                anchorX = point.plotX + chart.plotLeft,
                anchorY = point.plotY + chart.plotTop,
                pad,
                cloneToolTip;



                // Set the renderer size dynamically to prevent document size to change
                if (this.outside) {
                pad = (this.options.borderWidth || 0) + 2 * this.distance;
                this.renderer.setSize(
                label.width + pad,
                label.height + pad,
                false
                );
                anchorX += chart.pointer.chartPosition.left - pos.x;
                anchorY += chart.pointer.chartPosition.top - pos.y;
                }

                // do the move
                this.move(
                Math.round(pos.x),
                Math.round(pos.y || 0), // can be undefined (#3977)
                anchorX,
                anchorY
                );
                cloneToolTip = chart.tooltip.label.element.cloneNode(true);
                cloneToolTip = chart.container.firstChild.appendChild(cloneToolTip);
                setTimeout(function() {
                cloneToolTip.remove();
                }, 500)
                }")
                )
              ))

HighcharteR multiple tooltips open with hideDelay

1 Answers