title: ChartJS horizontal chart display legend on each bar
body: <p>I'm pretty new in ChartJS and I'm having a horizontal bar chart:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;canvas id="mybarChart"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var ctx = document.getElementById("mybarChart");
  
      ctx.height = 300;
  
      var mybarChart = new Chart(ctx, {
          type: 'horizontalBar',
          responsive: true,
          data: data,
          options: {
              legend: {
                  display: false
              },
              scales: {
                  yAxes: [{
                      display: false,
                      ticks: {
                          beginAtZero: true
                      },
                      gridLines: {
                          color: "rgba(0, 0, 0, 0)",
                      }
                  }],
                  xAxes: [{
                      display: false,
                      gridLines: {
                          color: "rgba(0, 0, 0, 0)",
                      },
                      barPercentage: 0.5,
                      categoryPercentage: 0.5
                  }]
              }
          }
      });
  </code></pre>
  
  <p>for which I'm trying to add the legend on each bar like <a href="https://i.stack.imgur.com/Uby7U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uby7U.png" alt="this"></a> but right now it looks like <a href="https://i.stack.imgur.com/TPzck.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TPzck.png" alt="this"></a></p>
  
  <p>I've tried adding</p>
  
  <pre><code>onAnimationComplete: function () {
  
              var ctx = this.chart.ctx;
              ctx.font = this.scale.font;
              ctx.fillStyle = this.scale.textColor
              ctx.textAlign = "center";
              ctx.textBaseline = "bottom";
  
              this.datasets.forEach(function (dataset) {
                  dataset.points.forEach(function (points) {
                      ctx.fillText(points.value, points.x, points.y - 10);
                  });
              })
          }
  </code></pre>
  
  <p>but still the same result. What am I doing wrong? 
  I found something <a href="http://jsfiddle.net/jfvy12h9/" rel="nofollow noreferrer">here</a> but the labels displayed on each bar are the ticks for Y axes. 
  Is possible to add the legend on each bar and also keep the tooltip? </p>
  
  <p>Thanks in advance!</p>