fix(markers): support html text and line breaks in marker labels

js/Graph.js

@@ -290,6 +290,7 @@ Graph.prototype = {
         height      : this.plotHeight,
         fontSize    : this.options.fontSize,
         fontColor   : this.options.fontColor,
+        plotOffset  : this.plotOffset,
         textEnabled : this.textEnabled,
         htmlText    : this.options.HtmlText,
         text        : this._text, // TODO Is this necessary?

js/types/markers.js

@@ -45,7 +45,10 @@ Flotr.addType('markers', {
       stackOffsetNeg,
       stackOffsetPos,
       stackOffset,
-      i, x, y, label;
+      i, x, y, label,
+      html            = [],
+      plotOffset      = options.plotOffset || {left: 0, top: 0},
+      div;
 
     context.save();
     context.lineJoin = 'round';
@@ -82,29 +85,39 @@ Flotr.addType('markers', {
       }
 
       label = options.labelFormatter({x: x, y: y, index: i, data : data});
-      this.plot(options.xScale(x), options.yScale(y), label, options);
+      this.plot(options.xScale(x), options.yScale(y), label, options, html);
     }
+
+    if (options.htmlText || !options.textEnabled) {
+      div = Flotr.DOM.node('<div style="position:absolute;left:' + plotOffset.left + 'px;top:' + plotOffset.top + 'px;color:' + options.color + '" class="flotr-labels"></div>');
+      Flotr.DOM.insert(div, html.join(''));
+      Flotr.DOM.insert(options.element, div);
+    }
+
     context.restore();
   },
-  plot: function(x, y, label, options) {
+  plot: function(x, y, label, options, html) {
     var context = options.context;
     if (isImage(label) && !label.complete) {
       throw 'Marker image not loaded.';
     } else {
-      this._plot(x, y, label, options);
+      this._plot(x, y, label, options, html);
     }
   },
 
-  _plot: function(x, y, label, options) {
+  _plot: function(x, y, label, options, html) {
     var context = options.context,
         margin = 2,
         left = x,
         top = y,
+        htmlStyle = 'font-size:' + (options.fontSize * 1.3) + 'px;font-family:sans-serif;white-space:pre-line;',
         dim;
 
     if (isImage(label))
-      dim = {height : label.height, width: label.width};
-    else
+        dim = {height : label.height, width: label.width};
+    else if (options.htmlText || !options.textEnabled) {
+      dim = options.text.html(label, options.element, htmlStyle, 'flotr-grid-label');
+    } else
       dim = options.text.canvas(label);
 
     dim.width = Math.floor(dim.width+margin*2);
@@ -128,7 +141,9 @@ Flotr.addType('markers', {
 
     if (isImage(label))
       context.drawImage(label, parseInt(left+margin, 10), parseInt(top+margin, 10));
-    else
+    else if (options.htmlText || !options.textEnabled) {
+      html.push('<div style="position:absolute;left:' + (left + margin) + 'px;top:' + (top + margin) + 'px;' + htmlStyle + '" class="flotr-grid-label">' + label + '</div>');
+    } else
       Flotr.drawText(context, label, left+margin, top+margin, {textBaseline: 'top', textAlign: 'left', size: options.fontSize, color: options.color});
   }
 });