0

I'm using Chart.js version 3. I need to left justify the labels on the y-axis of a stacked bar chart. How do accomplish that?

enter image description here

Rodney Hickman
  • 3,133
  • 11
  • 53
  • 83

1 Answers1

2

As described in the documentation this can be done using the crossAlign property:

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'pink'
    }]
  },
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          crossAlign: 'far'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
  • Oh, I miss that, my bad.... It appears that the documentation is missing the word "justification". A word popular among designers, front end developers and humans. :) – Rodney Hickman Oct 26 '21 at 23:06
  • 1
    Well it is open source so you are always welcome to adjust it even though it's description is still pretty understandable for most humans. It is better is everyone can understand it so you are welcome to put in any pr with changes – LeeLenalee Oct 26 '21 at 23:10