ChartJS - aligning axis labels after rotation

1
votes

I am using Chart.js for generating BarChart. How can I align labels, so that rotation is 90 and all labels are aligned to start of each label. Currently, all labels are aligned to end of each label.

I am trying to display all labels to start at same vertical position - where 'A' of Avengers is. Currently all labels are ending at same vertical position - where 'r' of War is.

I need text turned towards right (not left) and coming from bottom to top (not top to bottom)

enter image description here

public barChartOptions: ChartOptions = {
responsive: true,
legend: {
    display: false
  },
   scales: {
    xAxes: [{
      ticks: {
        // maxRotation: 90,
        minRotation: 90,
        labelOffset: 0,
        padding:-140
      },
    }]
  },
 };

Stackblitz link: https://ng2-charts-bar-template-tdpncj.stackblitz.io

Stackblitz code link: https://stackblitz.com/edit/ng2-charts-bar-template-tdpncj

2
chart.js
can you please share code on stackblitz.io – harkesh kumar
where you using this chartjs like (in Angular) – harkesh kumar
are you trying to show all labal at bottom or how – harkesh kumar
@harkeshkumar stackblitz.com/edit/ng2-charts-bar-template-tdpncj - here you can see the code. I am using Angular. I am trying to display all labels start at same vertical position - So in this case where 'A' of Avengers is. I just played with padding a bit. – Prasoon

2 Answers

0
votes

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
votes

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