title: Chartjs X axis label and tick formatting
body: <p>I am using <a href="http://www.chartjs.org/" rel="nofollow noreferrer">Chartjs</a> to display a time series line graph.</p>
  
  <p>My setup is as following...</p>
  
  <pre><code>   this.chartSetup = {
            type: 'line',
            data: {
              labels: this.times,
              datasets: [{
                fill: true,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                label: title,
                data: this.vals,
                pointRadius: 0,
              }]
            },
            options: {
              spanGaps: true,
              legend: {
                position: 'bottom',
                labels: {
                  boxWidth: 10
                }
              },
              tooltips: {
                enabled: false
              },
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                xAxes: [{
                  ticks: {
                    stepSize: 6,
                    unitStepSize: 5
                  },
                  type: 'time',
                  time: {
                    displayFormats: {
                      hour: 'h:mm a',
                      minute: 'h:mm a',
                    }
                  }
                }],
              },
            }
          };
  
     Chart.defaults.global.animation.easing = "easeOutBounce";
     this.chart = new Chart(this.canvas.nativeElement, this.chartSetup);
  </code></pre>
  
  <p>My chart looks like the following screen shot</p>
  
  <p><a href="https://i.stack.imgur.com/WLDjR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WLDjR.png" alt="enter image description here"></a></p>
  
  <p>The data is Date for the X axis (Labels), and just numbers for the Y.
  The time data goes from 6am to 6pm (12 hours worth)</p>
  
  <p>I have a couple of issues here all relating to the X axis label formatting.</p>
  
  <ol>
  <li><p>The initial 6am label is being cut off</p></li>
  <li><p>How can I change the X axis label rotation (so perhaps by 90 degrees will fix the truncated first value)</p></li>
  <li><p>My data goes to <strong>6pm</strong>, but it is showing an extra X axis value (<strong>7pm</strong>). Can I get rid of this?</p></li>
  </ol>
  
  <p>Thanks in advance for any suggestions here.</p>