Chartjs-PrimeNg chart label rotation with Angular2

by

0👍

✅

Thanks for @jordanwillis
I solved this Issue by migrating from primeng charts to ng2charts which use chart.js>2.0 version. This allow me to perform advanced customisation to my charts labels/font-size/rotation..

1👍

In chart.js, scale tick label rotation is performed automatically and is determined by how much space is available for each label. If there is not enough room to fit the labels horizontally, then they will be rotated.

The image of your chart looks fairly small compared with the size of your scale labels. If you can increase the size of your chart then they will probably appear horizontally.

If changing the size is not an option, then check out the minRotation and maxRotation tick options. You can use these to properties to specify how much the labels should rotate when they don’t fit. Note, the options are only used when the label is actually rotated (e.g. they will have no affect on labels that are small enough to first horizontally).

You can configure these properties inside of the scales.ticks. It would look something like this.

fillChartData(data){     
  this.chartData = {
    labels: data.map( x =>  x.nameProcess ),
    datasets: [{
      label: 'error',
      data: data.map( x =>  x.nbError ),
      backgroundColor: 'rgba(100,149,237,0.5)',
    }],
    options: {
      animation:{
        animateScale:true
      },
      scales: [{
        yAxes: {
          ticks: {
            minRotation: 0,
            maxRotation: 0,
          }
        }
      }]
    }
  };

  setTimeout(() =>  this.chart.reinit()); //TODO
}

Leave a comment