Search code examples
javascripthighchartsdotnethighcharts

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?


Solution

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