Chart.js 2 - chồng chéo nhãn

Question

Tôi đang sử dụng Chart.js 2 cho một trong các dự án của mình. Tôi đã thành công trong việc tạo kiểu cho nó nhưng có một vấn đề mà tôi dường như không thể sửa được và nó đang trở nên căng thẳng.

Đôi khi nhãn cuối cùng trên trục x bị chồng chéo.

Dưới đây là các tùy chọn mà tôi đang sử dụng:

$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 
       } 
      } 
     ] 
    } 
}; 

Bất kỳ trợ giúp sẽ rất cảm kích.

Answer 1

Tôi đã giải quyết vấn đề này bằng cách nghiêng các văn bản để chúng không trùng lặp.

Chỉ cần thêm minRotation: 30 vào dấu tick: {} đối tượng.

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