Angular JS Chart Prevent Overflow Label X

Question

How can I stop the last X axis label to widen the space after the end of the chart, as in the picture, using the chart.js library?

I also attach initialization parameters and parameters to 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

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

You can add the right 10px padding to the chart and expand the callback function, hide the last label by returning an empty line.

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

As K Scandrett recommends, label rotation can also be used if there are many chart values.

Answer 2

You can eliminate extra spaces by forcing rotation:

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

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

Original idea taken from fooobar.com/questions/497395 / ...