Chartjs-ChartJS – aligning axis labels after rotation

by

0👍

You can put it like this:

xAxes: [{
   ticks: {
      minRotation: -90,
      labelOffset: 0,
      padding: -30
   },
}]

Only problem is the text will be facing to the left

0👍

you can align labels like this but issue might be you pacing with text lenght size issue of handle that then it work for you , Sey minRotation: 360 so that rotation is 90 and all labels are aligned to start of each label

if you think text size you cannot make it short then i suggest you go with minRotation: 0 so it showing you proper text that every buddy like 

export class AppComponent  {
  public barChartOptions: ChartOptions = {
    responsive: true,
    legend: {
        display: false
      },
       scales: {
       xAxes: [{
        ticks: {
          minRotation: 360,
          labelOffset: 0,
          padding: -30
      },
}]
      },
  };
  public barChartLabels: Label[] = ['A', 'Br', 'In', 'Aq', 'V', 'Mis'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [];

  public barChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40] }
  ];

  constructor() { }

  ngOnInit() {
  }
}

Also check here updated code

https://stackblitz.com/edit/ng2-charts-bar-template-42mpft?file=src/app/app.component.ts

Leave a comment