title: chart.js label and value overlap issue
body: <p>Bar chart tooptip(label) and value inside the bar gets overlapped on hover. I'm using angular2 to bind data to chart canvas. This is the output I get when the code below executed. </p>
  
  <p><a href="https://i.stack.imgur.com/M2JHB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M2JHB.png" alt="enter image description here"></a></p>
  
  <p>and the code below for chart.js option.</p>
  
  <pre><code>public ChartOptions: any = {
  scaleShowVerticalLines: false,
  responsive: true,
  hover: {
    animationDuration: 0
  },
  tooltips: {
    headerFormat: '',
    custom: function (tooltip) {
      if (!tooltip) return;
      // disable displaying the color box;
      tooltip.displayColors = false;
      tooltip.titleFontSize = 0;
    },
    mode: 'label',
    callbacks: {
  
      title: function () {
      },
      label: function (tooltipItem, data) {
        return ["Year : " + tooltipItem.xLabel, "Return : " + tooltipItem.yLabel + '%'];
      }
    }
  },
  legend: { display: false },
  animation: {
    duration: 0,
    onComplete: function () {
      var ctx = this.chart.ctx;
  
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      ctx.fillStyle = "#fff";
      ctx.fontStyle = "bold";
  
      var maxBar = 0;
  
      this.data.datasets.forEach(dataset =&gt; {
        maxBar += Math.max.apply(null, dataset.data.map(Math.abs));
      });
  
      this.data.datasets.forEach(function (dataset) {
        for (var i = 0; i &lt; dataset.data.length; i++) {
  
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
  
          var y_pos = model.y + 18;
          //adjust negative values
          if (dataset.data[i] &lt; 0) {
            y_pos = (model.y) - 2;
          }
  
          if (maxBar / Math.abs(dataset.data[i]) &lt; 30) {
  
            var data = dataset.data[i];
            ctx.fillText((data == 0 || data == 0.0) ? "NA" : data + "%", model.x, y_pos);
          }
        }
      });
    }
  },
  scales: {
    xAxes: [{
      barPercentage: 0.7,
      ticks: {
        fontStyle: "bold",
        fontColor: "#000"
      },
      gridLines: {
        display: false
      }
    }],
    yAxes: [{
      ticks: {
        stepSize: 2,
        fontStyle: "bold",
        fontColor: "#000",
        callback: function (value, index) {
          return index % 2 === 0 ? (value + "%") : '';
        },
      },
      gridLines: {
        display: false
      },
      scaleLabel: {
        display: true,
      }
    }]
  }  };
  </code></pre>
  
  <p>This <code>ChartOptions</code> is used in canvas as <code>[options]="ChartOptions"</code>.
  Help me to resolve the issue. Thanks in advance. </p>