title: How to add padding to the vertical scale (X-axis) in Chart.js?
body: <p>According to the "<a href="http://www.chartjs.org/docs/#ticks-configuration" rel="nofollow noreferrer">Tick Configuration</a>" of Chart.js <strong>version 2.3</strong> it is only possible to set a padding for the ticks on the <em>Y-axis</em> ("<em>horizontal scale</em>"):</p>
  
  <blockquote>
    <p>padding | Number |10 | Padding between the tick label and the axis. <strong>Note: Only applicable to horizontal scales.</strong></p>
  </blockquote>
  
  <p>And this works like a charm:</p>
  
  <pre><code>scales: {
      yAxes: [{
          ticks: {
              padding: 20,
          }
      }],
      xAxes: [{
          ticks: {
               // how to set padding here?
          }
      }]
  }
  </code></pre>
  
  <p>But the draft says, that I need some padding on the <em>X-axis</em> as well</p>
  
  <p><a href="https://i.stack.imgur.com/WXB6e.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WXB6e.jpg" alt="enter image description here"></a></p>
  
  <p>How can I achieve this using Chart.js? </p>
  
  <p>Maybe it's possible using a plugin?</p>