Updating lineChartSVGResize example to use interactive guideline.

Rebuilding nv.d3.js.

examples/lineChartSVGResize.html

@@ -46,7 +46,7 @@ nv.addGraph(function() {
   var height = 300;
   var zoom = 1;
 
-
+  chart.useInteractiveGuideline(true);
   chart.xAxis
       .tickFormat(d3.format(',r'));
 

nv.d3.js

@@ -341,16 +341,22 @@ nv.interactiveBisect = function (values, searchVal, xAccessor) {
         ,   enabled = true  //True -> tooltips are rendered. False -> don't render tooltips.
         ;
 
+        //Format function for the tooltip values column
         var valueFormatter = function(d,i) {
             return d;
         };
 
+        //Format function for the tooltip header value.
+        var headerFormatter = function(d) {
+            return d;
+        };
+
         var contentGenerator = function(d) {
             if (content != null) return content;
 
             if (d == null) return '';
 
-            var html = "<table><thead><tr><td colspan='3'><strong class='x-value'>" + d.value + "</strong></td></tr></thead><tbody>";
+            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) {
                     var isSelected = (item.key === d.seriesSelectedKey) ? "selected" : "";
@@ -373,7 +379,7 @@ nv.interactiveBisect = function (values, searchVal, xAccessor) {
         //In situations where the chart is in a 'viewBox', re-position the tooltip based on how far chart is zoomed.
         function convertViewBoxRatio() {
             if (chartContainer) {
-              var svg = d3.select(chartContainer).select('svg');
+              var svg = d3.select(chartContainer);
               var viewBox = (svg.node()) ? svg.attr('viewBox') : null;
               if (viewBox) {
                 viewBox = viewBox.split(' ');
@@ -509,6 +515,14 @@ nv.interactiveBisect = function (values, searchVal, xAccessor) {
             return nvtooltip;
         };
 
+        nvtooltip.headerFormatter = function(_) {
+            if (!arguments.length) return headerFormatter;
+            if (typeof _ === 'function') {
+                headerFormatter = _;
+            }
+            return nvtooltip;
+        };
+
 
         return nvtooltip;
   };

src/tooltip.js

@@ -44,16 +44,22 @@
         ,   enabled = true  //True -> tooltips are rendered. False -> don't render tooltips.
         ;
 
+        //Format function for the tooltip values column
         var valueFormatter = function(d,i) {
             return d;
         };
 
+        //Format function for the tooltip header value.
+        var headerFormatter = function(d) {
+            return d;
+        };
+
         var contentGenerator = function(d) {
             if (content != null) return content;
 
             if (d == null) return '';
 
-            var html = "<table><thead><tr><td colspan='3'><strong class='x-value'>" + d.value + "</strong></td></tr></thead><tbody>";
+            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) {
                     var isSelected = (item.key === d.seriesSelectedKey) ? "selected" : "";
@@ -76,7 +82,7 @@
         //In situations where the chart is in a 'viewBox', re-position the tooltip based on how far chart is zoomed.
         function convertViewBoxRatio() {
             if (chartContainer) {
-              var svg = d3.select(chartContainer).select('svg');
+              var svg = d3.select(chartContainer);
               var viewBox = (svg.node()) ? svg.attr('viewBox') : null;
               if (viewBox) {
                 viewBox = viewBox.split(' ');
@@ -212,6 +218,14 @@
             return nvtooltip;
         };
 
+        nvtooltip.headerFormatter = function(_) {
+            if (!arguments.length) return headerFormatter;
+            if (typeof _ === 'function') {
+                headerFormatter = _;
+            }
+            return nvtooltip;
+        };
+
 
         return nvtooltip;
   };