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