Reputation: 7833

Chartjs X axis label and tick formatting

I am using Chartjs to display a time series line graph.

My setup is as following...

   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);

My chart looks like the following screen shot

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)

I have a couple of issues here all relating to the X axis label formatting.

The initial 6am label is being cut off
How can I change the X axis label rotation (so perhaps by 90 degrees will fix the truncated first value)
My data goes to 6pm, but it is showing an extra X axis value (7pm). Can I get rid of this?

Thanks in advance for any suggestions here.

Upvotes: 2