Chart.js 2 - label overlapping

Question

I'm using Chart.js 2 for one of my projects. I have successfully managed to style it but there is one issue that I can't seem to fix and it's getting on my nerves.

Sometimes the last label on x-axis is being overlapped.

Here are the options that I'm using:

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

Any help would be very appreciated.

Answer 1

I solved this problem by tilting the texts, so that they don't overlap.

Just add minRotation: 30 to ticks: {} object.

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