title: Chart.js: Display Custom Tooltips, always visible on stacked bar-chart
body: <p>In my MVC project, I am using chart.js (v2.8.0) to build a stacked bar-chart, with 3 data-sets.</p>
  
  <p>I need to display custom tooltips, that are always visible, inside the bars, for each dataset. (See the image below.) I am having difficulty understanding how to implement custom-tooltips that are always visible.</p>
  
  <p><a href="https://i.stack.imgur.com/yV0W8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yV0W8.png" alt="Desired End Result"></a></p>
  
  <p>This is what my current js code for the chart is:</p>
  
  <pre><code>var ctx = document.getElementById('myChart').getContext('2d');
  var chart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: labelArray,
          datasets: [{
              label: 'Green %',
              data: greenData,
              backgroundColor: 'rgb(0,166,149)',
              borderColor: 'rgb(0,166,149)',
              borderWidth: 1,
          },
          {
              label: 'Orange %',
              data: orangeData,
              backgroundColor: 'rgb(229,117,31)',
              borderColor: 'rgb(229,117,31)',
              borderWidth: 1,
          },
          {
              label: 'Grey %',
              data: greyData,
              backgroundColor: 'rgb(179,179,179)',
              borderColor: 'rgb(179,179,179)',
              borderWidth: 1,
          }]
      },
      options: {
          scales: {
              xAxes: [{
                  stacked: true,
              }],
              yAxes: [{
                  stacked: true
              }]
          }
      }
  });
  </code></pre>
  
  <p>Please, if someone can help me to get some custom tooltips always visible, in the right place in relation to the bars, then I can get it styled up appropriately.</p>