title: Chartjs plugin label in Angular app moving unexpectedly at hover
body: <p>I have an angular app showing a bar chart using <a href="http://www.chartjs.org/" rel="nofollow noreferrer">Chartjs</a> and <a href="http://jtblin.github.io/angular-chart.js/" rel="nofollow noreferrer">angular-chart</a> directive.</p>
  
  <p>I have also a Chartjs plugin applied on the bar chart to add a horizontal line with a label above it.</p>
  
  <p>It appears like this, with a space between the label and the horizontal line:
  <a href="https://i.stack.imgur.com/OQYw8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OQYw8.png" alt="enter image description here"></a></p>
  
  <p>But after I hover the mouse over one of the bars in the chart, the label moves a few pixel closer to the line:</p>
  
  <p><a href="https://i.stack.imgur.com/uebWb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uebWb.png" alt="enter image description here"></a></p>
  
  <p>I cannot find out why. Here is the issue reproduced: <a href="http://codepen.io/neptune01/pen/JWEeOZ" rel="nofollow noreferrer">http://codepen.io/neptune01/pen/JWEeOZ</a></p>
  
  <p>and the code:
  </p>
  
  <pre class="lang-js prettyprint-override"><code>//angular app ----------------------------------------------------------
  
  angular.module('app', ['chart.js'])
  .controller('BarCtrl', ['$scope',
    function ($scope) {
  
    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    $scope.series = ['Series A'];
  
    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40]
    ];
  
      $scope.options = {
                  horizontalLine: [{
                    "y": 60,
                    "style": "rgba(255,102,102,0.4)",
                    "text": "Horizontal line"
                  }]
              }
  }]);
  
  //horizontal line extension for chart.js ------------------------------
  var horizonalLinePlugin = {
    afterDraw: function(chartInstance) {
  
      var yScale = chartInstance.scales["y-axis-0"];
      var canvas = chartInstance.chart;
      var ctx = canvas.ctx;
      var index;
      var line;
      var style;
      var labelSize;
  
      if (chartInstance.options.horizontalLine) {
        for (index = 0; index &lt; chartInstance.options.horizontalLine.length; index++) {
          line = chartInstance.options.horizontalLine[index];
  
          if (!line.style) {
            style = "rgba(169,169,169, .6)";
          } else {
            style = line.style;
          }
  
          if (line.y) {
            yValue = yScale.getPixelForValue(line.y);
          } else {
            yValue = 0;
          }
  
          ctx.lineWidth = 3;
  
          if (yValue) {
            ctx.beginPath();
            ctx.moveTo(yScale.width, yValue);
            ctx.lineTo(canvas.width, yValue);
            ctx.strokeStyle = style;
            ctx.stroke();
          }
  
            if (chartInstance.options.scales.yAxes[0].ticks.fontSize != undefined){
                labelSize = parseInt(chartInstance.options.scales.yAxes[0].ticks.fontSize);
            } else {
                labelSize = parseInt(chartInstance.config.options.defaultFontSize);
            }
  
          if (line.text) {
            ctx.fillStyle = style;
            ctx.fillText(line.text, yScale.width, yValue-labelSize-4);
          }
        }
        return;
      };
    }
  };
  Chart.pluginService.register(horizonalLinePlugin);
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-app="app"&gt;
    &lt;div style="width:500px; height:300px;" ng-controller="BarCtrl"&gt;
  
  &lt;canvas id="bar" class="chart chart-bar"
    chart-data="data" chart-labels="labels" chart-series="series" chart-options="options"&gt;
      &lt;/canvas&gt;
  &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>