[Feature Request] Provide option to set color and width for annotation line (#703)

* Provide option to set color and width for annotation line

* documentation for new annotation options

diff --git a/docs/annotations.html b/docs/annotations.html
index 9ed49b1..7a0c1e3 100644 (file)
--- a/docs/annotations.html
+++ b/docs/annotations.html
@@ -194,6 +194,8 @@ g.ready(function() {
 <tr><td><code>height</code></td><td>Height (in pixels) of the annotation flag or icon.</td></tr>
 <tr><td><code>cssClass</code></td><td>CSS class to use for styling the annotation.</td></tr>
 <tr><td><code>tickHeight</code></td><td>Height of the tick mark (in pixels) connecting the point to its flag or icon.</td></tr>
+<tr><td><code>tickWidth</code></td><td>Width of the tick mark connecting the point to its flag or icon.</td></tr>
+<tr><td><code>tickColor</code></td><td>Color of the tick mark connecting the point to its flag or icon.</td></tr>
 <tr><td><code>attachAtBottom</code></td><td>If true, attach annotations to the x-axis, rather than to actual points.</td></tr>
 <tr><td><code>clickHandler</code></td>    <td>See Handlers, below</td></tr>
 <tr><td><code>mouseOverHandler</code></td><td>See Handlers, below</td></tr>

diff --git a/src/plugins/annotations.js b/src/plugins/annotations.js
index 87153c8..f6dd68e 100644 (file)
--- a/src/plugins/annotations.js
+++ b/src/plugins/annotations.js
@@ -148,7 +148,8 @@ annotations.prototype.didDrawChart = function(e) {
 
     var ctx = e.drawingContext;
     ctx.save();
-    ctx.strokeStyle = g.colorsMap_[p.name];
+    ctx.strokeStyle = a.hasOwnProperty('tickColor') ? a.tickColor : g.colorsMap_[p.name];
+    ctx.lineWidth = a.hasOwnProperty('tickWidth') ? a.tickWidth : g.getOption('strokeWidth');
     ctx.beginPath();
     if (!a.attachAtBottom) {
       ctx.moveTo(p.canvasx, p.canvasy);

diff --git a/tests/annotation.html b/tests/annotation.html
index 4cdcb10..002d4dd 100644 (file)
--- a/tests/annotation.html
+++ b/tests/annotation.html
@@ -93,6 +93,8 @@
         width: 18,
         height: 23,
         tickHeight: 4,
+        tickColor: 'indianred',
+        tickWidth: 2,
         text: 'Another one',
         cssClass: 'annotation',
         clickHandler: function() {