title: Tooltip overriding the text in chart js
body: <p>I have created a graph like below using <code>chart.js</code></p>
  
  <p><a href="https://i.stack.imgur.com/17U5s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/17U5s.png" alt="enter image description here"></a></p>
  
  <p>The above graph the texts like (Bare, Mounted) I creates this in <code>oncomplete</code> function like</p>
  
  <pre><code>onComplete: function () {
  
      // render the value of the chart above the bar
      var ctx = this.chart.ctx;
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.fillStyle = this.chart.config.options.defaultFontColor;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      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;
              if(dataset._meta[0].controller.index==1){
                  ctx.fillText(dataset.data[i], model.x-10, model.y+8);
                  ctx.fillText('Mounted', model.x-25, model.y+38);
                  ctx.fillText('360 (Available)', model.x-42, model.y-25);
              }else{
                  ctx.fillText(dataset.data[i], 10, model.y+8);
                  ctx.fillText('Bare', 12, model.y+38);
                  ctx.fillText($scope.labels[i], 12, model.y-25);
              }
  
          }
      });
  }}
  </code></pre>
  
  <p>But these values are rendered above the tooltip. How can I avoid this??</p>