Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I hide a Highcharts series from the chart, but always show it in the tooltip?

I am using Highcharts to render a chart with two y-axes. One axis measures a count, while the other axis measures a rate. To illustrate, refer to the following: http://jsfiddle.net/NH5R3

I'd like to simplify this chart by hiding the rate series (and ultimately removing the rate axis), but still have the shared tooltip show the corresponding rate series. I have tried to hide the series via plotOptions.series.visible and plotOptions.column.visible, but this hides the data from both the chart and tooltip.

I think I may need to modify the tooltip formatter to always render hidden series, but I'm wondering if there is a way to prevent the client from toggling the series state to visible.

Is there a better approach to this problem?

like image 290
Steve Guidi Avatar asked Dec 12 '25 06:12

Steve Guidi


1 Answers

At this point if the rates are only a series to make it into the tooltip, I'd just scrap the series all together and include the data via the formatter. Something like:

var rates = {'Category1':20,
             'Category2':25,
             'Category3':75};

...

tooltip: { shared: true,
     formatter: function() {
          var s = '<b>'+ this.x +'</b><br/>';                
          $.each(this.points, function(i, point) {
              s += '<span style="color:'+point.series.color+'">'+point.series.name+'</span>: <b>'+point.y+'</b><br/>'
            });
            s+='Rate: ' + rates[this.x] + '%';
            return s;
        },
 ...

Updated fiddle here.

like image 65
Mark Avatar answered Dec 13 '25 21:12

Mark



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!