Chartjs-Set Y axis at the top of each bar using Chart.js library

by

1👍

✅

This can be done mainly through different options of the scales.yAxes.ticks option.

For further details, consult Tick Configuration from the Chart.js v2.9.4 documentation.

Please take a look at below runnable code and see how it works.

new Chart('myChart', {
  type: 'horizontalBar',
  data: {
    labels: ['One', 'Two', 'Three'],
    datasets: [{
      data: [8, 12, 7],
      backgroundColor: ['#A60A2D', '#00A2C3', '#434F55'],
      barPercentage: 0.6
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          drawOnChartArea: false
        },
        ticks: {
          min: 0
        }
      }],
      yAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          mirror: true,
          fontSize: 18,
          labelOffset: -22
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

Leave a comment