3

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?

Steve Guidi
  • 19,700
  • 9
  • 74
  • 90

1 Answers1

4

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.

Mark
  • 106,305
  • 20
  • 172
  • 230