Chart Js Change Label orientation on x-Axis for Line Charts

Question

I am using chart.js.

Similar to this Question, I would like to rotate my x-axis labels 90 degrees. Currently my labels are rotated about 80 degrees with default settings.

Could somebody help me adapt the bar-chart solution for rotating labels, so that I can use it on line-charts?

Answer 1

If you are using chart.js 2.x, just set maxRotation: 90 and minRotation: 90 in ticks options. It works for me! And if you want to all x-labels, you may want to set autoSkip: false. The following is an example.

var myChart = new Chart(ctx, {     type: 'bar',     data: chartData,     options: {         scales: {             xAxes: [{                 ticks: {                     autoSkip: false,                     maxRotation: 90,                     minRotation: 90                 }             }]         }     } }); 

Answer 2

for x axis use this

 options: {       legend: {         display: false       },       scales: {         xAxes: [           {           ticks: {                 autoSkip: false,                 maxRotation: 0,                 minRotation: 0             }           }         ]       }     } 

and can filter the label with a for loop:

      arrayLabels.forEach((date, i) => {     let label = "";     if (i % step == 0 && fecha) {       label = moment(date, "DD/MM").format("DD MMM");     }     labels.push(label);   });    chartOptions.data.labels = labels;