hoverCallback option.

examples/decimal-custom-hover.html

@@ -26,7 +26,11 @@ window.m = Morris.Line({
   xkey: 'x',
   ykeys: ['y'],
   labels: ['sin(x)'],
-  parseTime: false
+  parseTime: false,
+  hoverCallback: function (index, options) {
+    var row = options.data[index];
+    return "sin(" + row.x + ") = " + row.y;
+  }
 });
 </pre>
 </body>

lib/morris.bar.coffee

@@ -124,12 +124,16 @@ class Morris.Bar extends Morris.Grid
     Math.min(@data.length - 1,
       Math.floor((x - @left) / ((@right - @left) / @data.length)))
 
-  # hover event handler
+  # hover movement event handler
   #
+  # @private
   onHoverMove: (x, y) =>
     index = @hitTest(x, y)
     @hover.update(@hoverContentForRow(index)...)
 
+  # hover out event handler
+  #
+  # @private
   onHoverOut: =>
     if @options.hideHover is 'auto'
       @hover.hide()
@@ -138,14 +142,17 @@ class Morris.Bar extends Morris.Grid
   #
   # @private
   hoverContentForRow: (index) ->
-    row = @data[index]
-    content = "<div class='morris-hover-row-label'>#{row.label}</div>"
-    for y, j in row.y
-      content += """
-        <div class='morris-hover-point' style='color: #{@colorFor(row, j, 'label')}'>
-          #{@options.labels[j]}:
-          #{@yLabelFormat(y)}
-        </div>
-      """
+    if typeof @options.hoverCallback is 'function'
+      content = @options.hoverCallback(index, @options)
+    else
+      row = @data[index]
+      content = "<div class='morris-hover-row-label'>#{row.label}</div>"
+      for y, j in row.y
+        content += """
+          <div class='morris-hover-point' style='color: #{@colorFor(row, j, 'label')}'>
+            #{@options.labels[j]}:
+            #{@yLabelFormat(y)}
+          </div>
+        """
     x = @left + (index + 0.5) * (@right - @left) / @data.length
     [content, x]

lib/morris.line.coffee

@@ -63,16 +63,23 @@ class Morris.Line extends Morris.Grid
       break if x < (r._x + @data[index]._x) / 2
     index
 
-  # hover event handler
+  # hover movement event handler
   #
+  # @private
   onHoverMove: (x, y) =>
     index = @hitTest(x, y)
-    displayHoverForRow(index)
+    @displayHoverForRow(index)
 
+  # hover out event handler
+  #
+  # @private
   onHoverOut: =>
     if @options.hideHover is 'auto'
       @displayHoverForIndex(null)
 
+  # display a hover popup over the given row
+  #
+  # @private
   displayHoverForRow: (index) ->
     if index?
       @hover.update(@hoverContentForRow(index)...)
@@ -86,14 +93,17 @@ class Morris.Line extends Morris.Grid
   # @private
   hoverContentForRow: (index) ->
     row = @data[index]
-    content = "<div class='morris-hover-row-label'>#{row.label}</div>"
-    for y, j in row.y
-      content += """
-        <div class='morris-hover-point' style='color: #{@colorFor(row, j, 'label')}'>
-          #{@options.labels[j]}:
-          #{@yLabelFormat(y)}
-        </div>
-      """
+    if typeof @options.hoverCallback is 'function'
+      content = @options.hoverCallback(index, @options)
+    else
+      content = "<div class='morris-hover-row-label'>#{row.label}</div>"
+      for y, j in row.y
+        content += """
+          <div class='morris-hover-point' style='color: #{@colorFor(row, j, 'label')}'>
+            #{@options.labels[j]}:
+            #{@yLabelFormat(y)}
+          </div>
+        """
     [content, row._x, row._ymax]
 
 

morris.js

@@ -616,7 +616,7 @@
     Line.prototype.onHoverMove = function(x, y) {
       var index;
       index = this.hitTest(x, y);
-      return displayHoverForRow(index);
+      return this.displayHoverForRow(index);
     };
 
     Line.prototype.onHoverOut = function() {
@@ -639,11 +639,15 @@
     Line.prototype.hoverContentForRow = function(index) {
       var content, j, row, y, _i, _len, _ref;
       row = this.data[index];
-      content = "<div class='morris-hover-row-label'>" + row.label + "</div>";
-      _ref = row.y;
-      for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) {
-        y = _ref[j];
-        content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n  " + this.options.labels[j] + ":\n  " + (this.yLabelFormat(y)) + "\n</div>";
+      if (typeof this.options.hoverCallback === 'function') {
+        content = this.options.hoverCallback(index, this.options);
+      } else {
+        content = "<div class='morris-hover-row-label'>" + row.label + "</div>";
+        _ref = row.y;
+        for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) {
+          y = _ref[j];
+          content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n  " + this.options.labels[j] + ":\n  " + (this.yLabelFormat(y)) + "\n</div>";
+        }
       }
       return [content, row._x, row._ymax];
     };
@@ -1252,12 +1256,16 @@
 
     Bar.prototype.hoverContentForRow = function(index) {
       var content, j, row, x, y, _i, _len, _ref;
-      row = this.data[index];
-      content = "<div class='morris-hover-row-label'>" + row.label + "</div>";
-      _ref = row.y;
-      for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) {
-        y = _ref[j];
-        content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n  " + this.options.labels[j] + ":\n  " + (this.yLabelFormat(y)) + "\n</div>";
+      if (typeof this.options.hoverCallback === 'function') {
+        content = this.options.hoverCallback(index, this.options);
+      } else {
+        row = this.data[index];
+        content = "<div class='morris-hover-row-label'>" + row.label + "</div>";
+        _ref = row.y;
+        for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) {
+          y = _ref[j];
+          content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n  " + this.options.labels[j] + ":\n  " + (this.yLabelFormat(y)) + "\n</div>";
+        }
       }
       x = this.left + (index + 0.5) * (this.right - this.left) / this.data.length;
       return [content, x];