PrimeNg chart label rotation with Angular2

Question

I have a problem with primeNg chart using angular 2. I am able to display the chart using the following code in my component:

 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
             }
           }
          };
      setTimeout(() =>  this.chart.reinit()); //TODO
  }

The code of my html:

<div class="col-lg-8 col-md-6">
	    <div class="card" >
	        <div class="card-content" id="barC">
	            <h4 class="title title-centered" >{{title}}</h4>
	            <p-chart  #chart2 type="bar" [data]="chartData" (click)="chartClicked($event)"></p-chart>
	        </div>
	    </div>
</div>

And the chart I got on browser: enter image description here

But now I want to display the x-labels horizontally and not as they showed up. Is there any way to rotate the x-label in order to display them horizontally? I look closely in primeNgCharts and chart.js documentations but I'm not able to find something who actually give me wanted behaviour.

wat is the final json you get for your datasets array. Update what is the value of nbError — Aravind
nbError is a number. The final json look like {[nameProcess: string, nbError: number]} — Géraud Willing B-S

jordanwillis jordanwillis · Accepted Answer · 2017-03-24T18:30:52

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
}

PrimeNg chart label rotation with Angular2

2 Answers