title: Fix ChartJS Values not Well Displayed
body: <p>How to make ChartJS scale a little more than the highest value to correctly display the value above the highest bar?</p>
  
  <p><a href="https://i.stack.imgur.com/lODS3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lODS3.png" alt="enter image description here"></a></p>
  
  <p>Here the second value (14) is half displayed and the third one (15) is not even displayed.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>var ctx = document.getElementById('chart-hour');
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ['09h - 10h', '10h - 11h', '11h - 12h', '12h - 13h', '13h - 14h', 'PAUSE DEJ', '15h - 16h', '16h - 17h', '17h - 18h'],
          datasets: [{
              label: '',
              data: [0,14,15,7,1,0,0,0,0],
              backgroundColor: [
                  'rgba(54, 162, 235, 0.6)',
                  'rgba(54, 162, 235, 0.6)',
                  'rgba(54, 162, 235, 0.6)',
                  'rgba(54, 162, 235, 0.6)',
                  'rgba(54, 162, 235, 0.6)',
                  'rgba(54, 162, 235, 0.6)',
                  'rgba(54, 162, 235, 0.6)',
                  'rgba(54, 162, 235, 0.6)',
                  'rgba(54, 162, 235, 0.6)'
              ],
              borderColor: [
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          legend: {
              display: false
          },
          responsive: true,
          maintainAspectRatio: false,
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });
  </code></pre>
  
  <p>And the plugin used to display the values:</p>
  
  <pre><code>Chart.plugins.register({
      afterDatasetsDraw: function(chart) {
          var ctx = chart.ctx;
  
          chart.data.datasets.forEach(function(dataset, i) {
              var meta = chart.getDatasetMeta(i);
              if (!meta.hidden) {
                  meta.data.forEach(function(element, index) {
                      // Draw the text in black, with the specified font
                      ctx.fillStyle = 'rgb(20, 20, 20)';
  
                      var fontSize = 15;
                      var fontStyle = 'normal';
                      var fontFamily = 'Montserrat';
                      ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
  
                      // Just naively convert to string for now
                      var dataString = dataset.data[index].toString();
  
                      // Make sure alignment settings are correct
                      ctx.textAlign = 'center';
                      ctx.textBaseline = 'bottom';
  
                      var padding = 0;
                      var position = element.tooltipPosition();
                      ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                  });
              }
          });
      }
  });
  </code></pre>