Updating tooltip highlight so that the item will only highlight if the

mouse is really close to the chart point. Created a "nearestValueIndex"
function.

src/interactiveLayer.js

@@ -230,4 +230,22 @@ nv.interactiveBisect = function (values, searchVal, xAccessor) {
           return index;
       else
           return nextIndex
+};
+
+/*
+Returns the index in the array "values" that is closest to searchVal.
+Only returns an index if searchVal is within some "threshold".
+Otherwise, returns null.
+*/
+nv.nearestValueIndex = function (values, searchVal, threshold) {
+      "use strict";
+      var yDistMax = Infinity, indexToHighlight = null;
+      values.forEach(function(d,i) {
+         var delta = Math.abs(searchVal - d);
+         if ( delta < yDistMax && delta < threshold) {
+            yDistMax = delta;
+            indexToHighlight = i;
+         }
+      });
+      return indexToHighlight;
 };

src/models/cumulativeLineChart.js

@@ -515,15 +515,11 @@ 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 domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]);
+            var threshold = 0.03 * domainExtent;
+            var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold);
+            if (indexToHighlight !== null)
+              allData[indexToHighlight].highlight = true;
           }
 
           var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex), pointIndex);

src/models/lineChart.js

@@ -265,15 +265,11 @@ nv.models.lineChart = 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 domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]);
+            var threshold = 0.03 * domainExtent;
+            var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold);
+            if (indexToHighlight !== null)
+              allData[indexToHighlight].highlight = true;
           }
 
           var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));

src/nv.d3.css

@@ -98,6 +98,7 @@
   border-spacing:0;
 }
 
+
 .nvtooltip table td {
   padding: 2px 9px 2px 0;
   vertical-align: middle;
@@ -111,6 +112,14 @@
   font-weight: bold;
 }
 
+.nvtooltip table tr.highlight td {
+  padding: 1px 9px 1px 0;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
 .nvtooltip table td.legend-color-guide div {
   width: 8px;
   height: 8px;

src/tooltip.js

@@ -106,8 +106,8 @@ window.nv.tooltip.* also has various helper methods.
             trowEnter.selectAll("td").each(function(p) {
                 if (p.highlight)
                     d3.select(this)
-                        .style("border-bottom","solid 1px " + p.color)
-                        .style("border-top","solid 1px " + p.color)
+                        .style("border-bottom-color", p.color)
+                        .style("border-top-color", p.color)
                         ;
             });