Highcharter shared tooltip + bolding currently hovered series

[Peter.P]

Hi,

I need to create a chart with a tooltip that is a combination of "shared" and default look.
Here is how it looks now (with shared option on):

And here is how similar view looks in Grafana:

"Critical" is a series I am currently hovering over and it is bolded in the tooltip.
How to achieve this bolding using highcharter?
I guess it is possible by writing appropriate JavaScript code and putting in formatter like this:

hc_tooltip(formatter = JS(own_js_code_here), shared = TRUE/FALSE)

Any help appreciated.

[paul]

Yes possible with a custom formatter with shared tooltip set to false!

library(highcharter)

my_tooltip <- "function() {
            var series = this.series.chart.series,
                point = this.point,
                s = '<span style=\"font-size: 10px\">' + this.key + '</span><br/>',
                tmp;

            $.each(series, function(i, serie){
                dot = '<span style=\"color:' + serie.color + '\">\u25CF</span> '
                tmp = serie.data[point.x].series.name + ': ' + point.y + 'm';

                if( serie.index === point.series.index )
                    tmp = '<b>' + tmp + '</b>';
                
                s += '<br/>' + dot + ' ' + tmp;
            });
            
            return s;
        }"

highcharts_demo() %>% 
  hc_tooltip(formatter = JS(my_tooltip), shared = FALSE)

[Peter.P]

Thank You for your anwer.
I think there is a small problem with the code, the following line gives an error:

tmp = serie.data[point.x].series.name + ': ' + point.y + 'm';

Cannot read property 'series' of undefined

I think it should be:

tmp = serie.data[i].series.name + ': ' + point.y + 'm';

Now the series names are correct, they get bolded as expected, but both values are the same which is not correct:

I will be grateful for solving this problem.