Added feature where tooltips will highlight the row corresponding to the point your mouse is closest to.

nv.d3.js

@@ -428,7 +428,13 @@ window.nv.tooltip.* also has various helper methods.
             var html = "<table><thead><tr><td colspan='3'><strong class='x-value'>" + headerFormatter(d.value) + "</strong></td></tr></thead><tbody>";
             if (d.series instanceof Array) {
                 d.series.forEach(function(item, i) {
-                    html += "<tr>";
+                    if (item.highlight) {
+                        html += "<tr class='highlight'>";
+                    }
+                    else {
+                        html += "<tr>";
+                    }
+                    
                     html += "<td class='legend-color-guide'><div style='background-color: " + item.color + ";'></div></td>";
                     html += "<td class='key'>" + item.key + ":</td>";
                     html += "<td class='value'>" + valueFormatter(item.value,i) + "</td></tr>"; 

src/models/cumulativeLineChart.js

@@ -491,6 +491,8 @@ nv.models.cumulativeLineChart = function() {
       interactiveLayer.dispatch.on('elementMousemove', function(e) {
           lines.clearHighlights();
           var singlePoint, pointIndex, pointXLocation, allData = [];
+          
+          
           data
           .filter(function(series, i) { 
             series.seriesIndex = i;
@@ -510,6 +512,20 @@ nv.models.cumulativeLineChart = function() {
               });
           });
 
+          //Highlight the tooltip entry based on which point the mouse is closest to.
+          if (allData.length > 2) {
+            var yValue = chart.yScale().invert(e.mouseY);
+            var yDistMax = Infinity, indexToHighlight = null;
+            allData.forEach(function(series,i) {
+               var delta = Math.abs(yValue - series.value);
+               if ( delta < yDistMax) {
+                  yDistMax = delta;
+                  indexToHighlight = i;
+               }
+            });
+            allData[indexToHighlight].highlight = true;
+          }
+
           var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex), pointIndex);
           interactiveLayer.tooltip
                   .position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})

src/models/lineChart.js

@@ -262,6 +262,19 @@ nv.models.lineChart = function() {
                   color: color(series,series.seriesIndex)
               });
           });
+          //Highlight the tooltip entry based on which point the mouse is closest to.
+          if (allData.length > 2) {
+            var yValue = chart.yScale().invert(e.mouseY);
+            var yDistMax = Infinity, indexToHighlight = null;
+            allData.forEach(function(series,i) {
+               var delta = Math.abs(yValue - series.value);
+               if ( delta < yDistMax) {
+                  yDistMax = delta;
+                  indexToHighlight = i;
+               }
+            });
+            allData[indexToHighlight].highlight = true;
+          }
 
           var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
           interactiveLayer.tooltip

src/models/stackedAreaChart.js

@@ -349,10 +349,28 @@ nv.models.stackedAreaChart = function() {
               allData.push({
                   key: series.key,
                   value: chart.y()(point, pointIndex),
-                  color: color(series,series.seriesIndex)
+                  color: color(series,series.seriesIndex),
+                  stackedValue: point.display
               });
           });
 
+          allData.reverse();
+
+          //Highlight the tooltip entry based on which stack the mouse is closest to.
+          if (allData.length > 2) {
+            var yValue = chart.yScale().invert(e.mouseY);
+            var yDistMax = Infinity, indexToHighlight = null;
+            allData.forEach(function(series,i) {
+               if ( yValue >= series.stackedValue.y0 && yValue <= (series.stackedValue.y0 + series.stackedValue.y))
+               {
+                  indexToHighlight = i;
+                  return;
+               }
+            });
+            if (indexToHighlight != null)
+               allData[indexToHighlight].highlight = true;
+          }
+
           var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
           interactiveLayer.tooltip
                   .position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})

src/nv.d3.css

@@ -95,12 +95,14 @@
 
 .nvtooltip table {
   margin: 6px;
+  border-spacing:0;
 }
 
 .nvtooltip table td {
   padding-right: 9px;
-  padding-bottom: 3px;
+  padding-bottom: 5px;
   vertical-align: middle;
+
 }
 
 .nvtooltip table td.key {
@@ -122,6 +124,10 @@
   padding: 3px 0 3px 0;
 }
 
+.nvtooltip tr.highlight  {
+  background-color: #eee;
+}
+
 .nvtooltip-pending-removal {
   position: absolute;
   pointer-events: none;

src/tooltip.js

@@ -73,9 +73,15 @@ window.nv.tooltip.* also has various helper methods.
             var html = "<table><thead><tr><td colspan='3'><strong class='x-value'>" + headerFormatter(d.value) + "</strong></td></tr></thead><tbody>";
             if (d.series instanceof Array) {
                 d.series.forEach(function(item, i) {
-                    html += "<tr>";
+                    if (item.highlight) {
+                        html += "<tr class='highlight'>";
+                    }
+                    else {
+                        html += "<tr>";
+                    }
+                    
                     html += "<td class='legend-color-guide'><div style='background-color: " + item.color + ";'></div></td>";
-                    html += "<td class='key'>" + item.key + ":</td>";
+                    html += "<td class='key'>" + item.key + " </td>";
                     html += "<td class='value'>" + valueFormatter(item.value,i) + "</td></tr>"; 
                 });
             }