Angular Chart JS prevent x label causing overflow

Question

How can I prevent the last x axis label causing the to extend white space after the graph ends like in the picture using chart.js library ?

I am also attaching the initialization and options setting for my chart.

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

You can eliminate that extra whitespace by forcing rotation:

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

Here is a demo with a before and after http://jsbin.com/dorapekizo/edit?html,js,output

Original idea came from https://stackoverflow.com/a/39706742/1544886

Answer 2

See this example: https://jsfiddle.net/9r6nt0tu/

You could add right-padding of 10px to the chart and expand callback function hide the last label by returning an empty string.

callback: (value,index,values) => {
  // don't show last tick label
  if (index+1 >= values.length) {
    return '';
  }

  ...
}

As K Scandrett recommends, label rotation could also be used if many chart values exist.