Chart.js 2 - ラベルが重複する

Question

私のプロジェクトの1つにChart.js 2が使用されています。私はそれを成功裏にスタイルすることに成功しましたが、私は修正することができないと私の神経に乗っている1つの問題があります。

X軸の最後のラベルが重なっていることがあります。すべてのヘルプは非常に高く評価されるだろう

$scope.colours = [ 
    { 
     borderColor: '#FFF', 
    }, 
    { 
     borderColor: '#FAF6DD' 
    }, 
    { 
     borderColor: '#A5CCFE' 
    } 
]; 

$scope.options = { 

    type: 'line', 

    tooltips: 
    { 
     enabled: false 
    }, 

    elements: 
    { 
     line: 
     { 
      borderWidth: 2, 
      fill: false 
     }, 
     point: 
     { 
      radius: 0, 
      hoverRadius: 0 
     } 
    }, 

    scales: { 
     yAxes: [ 
      { 
       gridLines: 
       { 
        display: true, 
        color: "#16a693" 
       }, 
       ticks: 
       { 
        fontFamily: 'Lato', 
        fontColor: "#fff", 
        fontSize: 14 
       } 
      } 
     ], 
     xAxes: [ 
      { 
       type: 'time', 
       ticks: 
       { 
        autoSkip: true, 
        display: true, 
        autoSkipPadding: 15, 
        fontFamily: 'Lato', 
        fontColor: "#fff", 
        fontSize: 14, 
        maxRotation: 0 
       }, 

       time: 
       { 
        displayFormats: 
        { 
         'millisecond': 'HH:mm:ss', 
         'second': 'HH:mm:ss', 
         'minute': 'HH:mm:ss', 
         'hour': 'HH:mm:ss', 
         'day': 'HH:mm:ss', 
         'week': 'HH:mm:ss', 
         'month': 'HH:mm:ss', 
         'quarter': 'HH:mm:ss', 
         'year': 'HH:mm:ss' 
        } 
       }, 
       gridLines: 
       { 
        display: false 
       } 
      } 
     ] 
    } 
}; 

：ここ

は、私が使用しているオプションです。

Answer 1

この問題は、テキストが重ならないように傾けて解決しました。

ダニ：{}オブジェクトにminRotation: 30を追加するだけです。

ticks: { 
      fontFamily: 'Lato', 
      fontColor: "#fff", 
      fontSize: 14, 
      minRotation: 30 
     }