0

Consider this little chart.js chart:

new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['some veeeery loong label', '2', '3', '4', '5'],
    datasets: [{
      data: [100, 96, 84, 76, 69]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks : {
          maxRotation : 90,
          minRotation : 90
        }
      }]
    }
  }
});

I have a question regarding the y-axis label rotation here. It works but results in a big gap on the left of the chart. In fact thats the same space that would be used if I don't rotate.

This picture shows what I mean: enter image description here

Is this intentional behavior of chart.js or do I miss something here. And what is the best way to rearrange my chart using the full space.

My only idea is using options.layout.padding.left = -80. But this looks like a very bad approach to me.

ArcticLord
  • 3,999
  • 3
  • 27
  • 47
  • Hi, instead of showing all labels, maybe you cloud hide them and set a `labelString`, see this answer [here](https://stackoverflow.com/a/36954319/3376838). – Francisco Soares Apr 17 '19 at 14:17
  • Won't work for me. I want to keep my labels and don't want to replace them with one single axis label – ArcticLord Apr 17 '19 at 14:30
  • I think `options.layout.padding.left = -80` or a similar concept is the way to go here. `Chart.js` is first rendering the chart and then rotating the labels. There doesn't seem like an obvious way to flip the order. – Joseph Cho Apr 17 '19 at 15:04

0 Answers0