Chart.js 2.x: labels displaying over eachother

Question

The last two labels display over each other as shown in the image below. How do I fix this?

Here's some lorem ipsum so stackoverflow doesn't complain about my post being mostly code: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra porta pretium. Suspendisse vitae congue turpis, eu condimentum turpis. Cras a ultrices velit. Sed semper efficitur felis, et porttitor sapien vestibulum ac. Sed viverra porttitor arcu, ac finibus ligula ultrices non. Nullam quis porttitor elit. Maecenas fringilla erat sed libero luctus efficitur vel sit amet massa. Proin hendrerit metus in nibh fringilla malesuada. Proin turpis turpis, tempor non venenatis eu, fringilla in nunc. Proin ultricies neque sit amet nisi posuere sagittis. Vivamus erat massa, hendrerit nec nibh vitae, commodo faucibus felis. Maecenas a urna diam.

Options:

var options = {
        scales: {

            xAxes: [{
                gridLines:{
                    display:false,
                },
                type:"time"
            }],

            yAxes: [{
                ticks:{
                    stepSize:10000
                }
            }]
        }
    };

Data:

{
                label: "My Dataset",
                fill: false,
                lineTension: 0.1,
                borderColor: "#8CCEC2",
                backgroundColor: "#8CCEC2",
                borderCapStyle: 'butt',
                borderJoinStyle: 'miter',
                pointRadius:0,
                data: [
                    {
                         x:moment((new Date()).toISOString()).subtract(1,"days")
                        ,y:9000
                    },
                    {
                         x:moment((new Date()).toISOString()).subtract(2,"days")
                        ,y:11000
                    },
                    {
                         x:moment((new Date()).toISOString()).subtract(3,"days")
                        ,y:8000
                    },
                    {
                         x:moment((new Date()).toISOString()).subtract(4, "days")
                        ,y:10000
                    },
                    {
                         x:moment((new Date()).toISOString()).subtract(5, "days")
                        ,y:9000
                    }
                ],
                spanGaps: false
            }

Answer 1

Try scales.xAxes[0].time.round = 'day' This fixed it for me.

before:

after:

e.g.,

             scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        format: "MM/DD/YYYY",
                        round: 'day',
                        tooltipFormat: 'll'
                    },
                    scaleLabel: {
                        display: true,
                    }
                }],
             }

Answer 2

Unfortunately, chart.js has trouble sometimes auto-fitting a time scale x-axis because of all the format variations and possibilities. You can do one of two things to solve this. Either expand the size of the chart container (so that there is more room to render the chart) or configure the time scale manually to optimize how it looks.

In this specific case I used the time.unit property to display the scale in units of 'days'. Here is the relevant config:

scales: {
  xAxes: [{
    gridLines: {
      display: false,
    },
    type: "time",
    time: {
      unit: 'day',
    }
  }],
  yAxes: [{
    ticks:{
      stepSize: 10000
    }
  }]
}

Here is a codepen to demonstrate what I mean.