Highcharter shared tooltip + bolding currently hovered series

highcharter
#1

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):

obraz

And here is how similar view looks in Grafana:

obraz

"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.

0 Likes

#2

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)
0 Likes