Chartjs X-Achse Etikett und Tick-Formatierung

Question

Ich verwende Chartjs, um eine Zeitreihe Liniendiagramm anzuzeigen.

Mein Setup ist wie folgt ...

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

Mein Diagramm sieht aus wie der folgende Bildschirm

Schuss

Die Daten sind Datum für die X-Achse (Labels), und nur Zahlen für die Y. Die Zeitdaten gehen von 06.00 Uhr bis 18.00 Uhr (12 Stunden wert)

Ich habe ein paar Probleme hier alle re die Formatierung der X-Achsenbeschriftung Meine Daten gehen

1. Das anfängliche 06.00 Label

2. abgeschnitten wird Wie kann ich die X-Achse Etikettendrehung (so vielleicht den verkürzte ersten Wert wird fix um 90 Grad) ändern

3. zu 6pm, aber es zeigt eine zusätzliche X-Achse Wert (7pm). Kann ich das loswerden?

Vielen Dank im Voraus für irgendwelche Vorschläge hier.

Answer 1

1,2 - Set minRotation = 90
3 - Satz Max Wert auf x-Achsen

Answer 2

Was für mich gearbeitet wurde

Einstellung

autoskip: true 
autoSkipPadding: 30 

in der Zecke Konfiguration.