title: Hiding the ticks on the x-axes clips the chart (Chart.JS)
body: <p>I am trying to hide the ticks on the x-axis of a bubble chart.</p>
  
  <p>I tried using "display: false" within the ticks property.</p>
  
  <p>It does remove the ticks however the chart is now being clipped.</p>
  
  <p>Is there a way I can hide these ticks without affecting the appearance of the chart or to maybe add some padding so the chart's appearance isn't affected?</p>
  
  <p><a href="https://i.stack.imgur.com/LLnH0.png" rel="nofollow noreferrer">Appearance before the ticks are removed</a></p>
  
  <p><a href="https://i.stack.imgur.com/dsHTd.png" rel="nofollow noreferrer">Clipping once the ticks are removed with "display: false"</a></p>
  
  <p>You can see the code for the chart I have created below:</p>
  
  <pre><code>xAxes : [
      {
          id : 'first-x-axis',
          ticks : {
              display : false,
              min :  &lt;  ? php echo $min ?  &gt; , // Controls where axis starts
              max :  &lt;  ? php echo $max ?  &gt; , // Controls where axis finishes
              stepSize :  &lt;  ? php echo $step ?  &gt; // Control the gap between the first x-axis value and the last x-axis value
          },
          gridLines : {
              display : false,
              lineWidth : 7 // Width of bottom line
          }
      }
  ]
  </code></pre>
  
  <p>I appreciate any help or suggestions ^_^</p>