title: ChartJS xAxis label position
body: <p>I have a ChartJS that display the label as slanted when you resize the window to smaller size.</p>
  
  <p><a href="https://i.stack.imgur.com/3PECQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3PECQ.png" alt="enter image description here"></a></p>
  
  <p>What I want to do is to lower the X-labels down a bit vertically so they are not as close to the base of the graph if possible.</p>
  
  <p>After googling around, it looks like I can disable the tick display for x-Axis and use the option's animation to do this manually.  I tried to implement this in the following <a href="https://jsfiddle.net/2jc13qwx/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <pre><code>    animation: {
        duration: 1,
        onComplete: function() {
          var chartInstance = this.chart;
          this.data.datasets.forEach(function(dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function(bar, index) {
  
              var label = bar._model.label;
              var xOffset = bar._model.x;
              var yOffset = bar._model.y;
              ctx.fillText(label, xOffset, 420);
            });
          });
        }
      },
  </code></pre>
  
  <p>However, I can't get the label to scale properly when I resize the window.  Can you help?</p>