Angular Chart JS verhindern, dass x-Etikett einen Überlauf verursacht

Question

Wie kann ich verhindern, dass die letzte X-Achsenbeschriftung den Leerraum verlängert, nachdem das Diagramm wie in der Abbildung mit der Bibliothek chart.js endet?

Ich füge auch die Initialisierung und Optionen für mein Diagramm an.

this.colors = [{ 
      backgroundColor:"rgba(128, 203, 196,0.45)", 
      borderColor:"#80cbc4", 
      pointBackgroundColor: "#80cbc4", 
      pointBorderWidth: 2, 
      hoverBorderColor:"#80cbc4", 
      pointBorderColor:"#fff", 
      pointRadius: 5, 
      pointHoverRadius:5 
     }]; 
     this.options = { 
      scales: { 
       yAxes: [ 
        { 
         id: 'y-axis-1', 
         type: 'linear', 
         display: true, 
         position: 'left', 
         ticks : { 
          beginAtZero : true, 
          fontColor: 'rgba(0,0,0,0.7)', 
          callback: this.displayNumeric, 
          fontSize: 13 
         } 
        } 
       ], 
       xAxes: [ 
        { 
         gridLines : { 
          display : false 
         }, 
         ticks : { 
          callback: value => { 
           switch (this.period) { 
            case "hour": 
             return moment(value).format("hh:mma"); 
             break; 
            case "day": 
             return moment(value).format("MMM DD"); 
             break; 
            case "week": 
             return moment(value).format("MMM DD"); 
             break; 
            case "month": 
             return moment(value).format("MMM"); 
             break; 
            default: 
             return value.toString(); 
             break; 
           } 
          } 
         } 
        } 
       ] 
      }, 
      elements: { 
       line: { 
        borderWidth : 2, 
        tension: 0 
       } 
      } 

Answer 1

dieses Beispiel anzeigen : https://jsfiddle.net/9r6nt0tu/

Sie könnten dem Diagramm den rechten Abstand von 10px hinzufügen und die Funktion callback erweitern, um die letzte Beschriftung auszublenden, indem Sie eine leere Zeichenfolge zurückgeben.

Wie K Scandrett empfiehlt, könnte Label Rotation auch verwendet werden, wenn viele Diagrammwerte existieren.

Answer 2

können Sie das zusätzliche Leerzeichen beseitigen, indem sie zwingt Rotation:

xAxes: [{ 
    ticks: { 
     autoSkip: false, 
     maxRotation: 45, 
     minRotation: 45 
    } 
}] 

Hier ist eine Demo mit einer vor und nach http://jsbin.com/dorapekizo/edit?html,js,output

Ursprüngliche Idee von https://stackoverflow.com/a/39706742/1544886 kam