HighStock CrossHair Values Displayed Outside of Tooltip With Multiple Trends - highcharts

Question

I have a HighStock chart (below) where I display 10-15 trends on average. I have found that the Tooltip becomes slow and too large when running so many trends on a single display. I would like to disable the tooltip, but still display the values for each trend hovered on by the crosshairs. What event do I subscribe to in HighStock to essentially move the values displayed in the tooltip to something custom?
I have attached an image of my graph with the tooltip visible and a custom legend to the left. I would like to have the hovered on values (at the crosshairs) appear next to their legend items on the left just like they do in the tooltip, disable the tooltip, but keep the crosshairs.
I have found several ways to do this using PlotOptions.Series.Point.Events.MouseOver, but that only works for one trend. How do I do it for all my trends?
It is worth noting that my code works well. The picture of the graph above is a picture of a working graph dynamically generated in MVC4 that displays beautifully on a PC/MAC/iPhone/iPad. My question ultimately needs someone proficient with HighStock to answer as they will have the intimate knowledge necessary to know what event needs to be subscribed to or what changes I need to make in order to push the data I need into a Javascript function (so I can push the crosshair values to my custom legend). It's not a question of "Is my code correct?". It's a question of "What code do I use to get the desired effect?".
But here is the code just in case it's relevant. Notice I am building a C# generic "var" and returning it via "Javascript()".
// BUILD HIGHCHARTS JAVASCRIPT
var data = #"$(function () {
$.post(""";
if (Request.ApplicationPath.ToString() == "/")
{
data += #"/HighCharts/GetData"", function (data) {";
}
else
{
data += Request.ApplicationPath.ToString() + #"/HighCharts/GetData"", function (data) {";
}
data += #"// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
events : {
load : LoadComplete
},
renderTo: 'container',
zoomType: 'x'
}, ";
data += #"colors: [ ";
foreach (var a in model.listOfSensors)
{
data += "'" + a.ColorHex.ToString() + "'";
y = y + 1;
if (y != model.listOfSensors.Count)
{
data += ",";
}
}
data += #"], ";
data += #"plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
SeriesMouseOver(this.series.name)
},
mouseOut: function () {
SeriesMouseOut(this.series.name)
}
}
}
}
},";
data += #"navigator : {
adaptToUpdatedData: false
}, ";
data += #"exporting : {
enabled: true
}, ";
data += #"rangeSelector : {
buttons: [{
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
inputStyle: {
color: '#CCCCCC',
fontFamily: 'Arial'
},
labelStyle: {
color: '#000000',
fontFamily: 'Arial',
fontWeight: 'bold'
},
selected : 3 // all
},
xAxis : {
events : {
afterSetExtremes : afterSetExtremes
},
minRange: 3600 * 1000 // one hour
},
yAxis: [";
// BUILD SCALES
foreach (IECRM_Data_Project.Entities.Scale a in model.scales)
{
data += "{ ";
data += "min: " + a.Min.ToString() + ",";
data += "showEmpty: " + a.ShowIfEmpty.ToString().ToLower() + ",";
data += "max: " + a.Max.ToString() + ",";
data += "lineColor: '" + a.ColorHex.ToString() + "',";
data += "labels: { enabled: false }" ;
data += "}";
x = x + 1;
if (x != model.scales.Count) //ADD A COMMA AFTER EACH EXCEPT THE LAST
{
data += ",";
}
}
data += #"],
tooltip: {
pointFormat: '<span id=""{series.name}.replace(/\./g, """")"" style=""color:{series.color}"">{series.name}: {point.y}</span><br />',
useHTML: true,
valueDecimals: 1
},
series: data
});
});
});";
return JavaScript(data);