Highcharter shared tooltip + bolding currently hovered series


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.

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


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

            $.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)

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.

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.