Chartjs-How to align horizontal bars to the right

by

0👍

You could use floating bars for this:

const options = {
  type: 'horizontalBar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [
        [
          20,
          12
        ],
        [
          20,
          19
        ],
        [
          20,
          3
        ],
        [
          20,
          5
        ],
        [
          20,
          2
        ],
        [
          20,
          14
        ]
      ],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

You put the maximum value of your axis as the first or last (chart.js will render it the same) in your array. Then for the other value you enter the start point. So that would be max value – the percentage

Leave a comment