Angular2 charts (chart.js) Labels not vertical even though option is set

user_2094257 0
Viewed 1419

I am trying to display the labels on the x-axis of a barchart vertically in order to fit all labels onto the graph. I read in another question that the way to do this is to set the max and min rotation to 90. Even though I set the min/max rotation in options the labels still get displayed at an angle... Any idea what i'm missing/doing wrong here?

my options code:

options:any = {
    scaleShowVerticalLines: false,
    scaleShowValues: true,
    scales: {
        yAxis: [{
            ticks: {
                beginAtZero: true
            }
        }],
        xAxis: [{
            stacked: false,         
            scaleLabel: {
                labelString: 'Date'
            },
            ticks: {
                stepSize: 1,
                min: 0,
                maxRotation: 90,
                minRotation: 90,
                autoSkip: false
            }
        }]
    },
    responsive: true
};

Screenshot of my bar chart:

https://imgur.com/a/xW8Lb

chart.js angular
1 Answers

I don't see anything wrong with your options, except the property names xAxis and yAxis, these are incorrect. The correct property names are xAxes and yAxes.

Also, you shouldn't be setting scaleShowVerticalLines and scaleShowValues properties. Those are deprecated.

options: any = {
   scales: {
      yAxes: [{
         ticks: {
            beginAtZero: true
         }
      }],
      xAxes: [{
         stacked: false,
         scaleLabel: {
            labelString: 'Date'
         },
         ticks: {
            stepSize: 1,
            min: 0,
            maxRotation: 90,
            minRotation: 90,
            autoSkip: false
         }
      }]
   },
   responsive: true
};
user_77506400
Related