Horizontal Bar Chart Label Position

by Andres Abadia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

JavaScript

var chartColors = {
  red: 'rgba(255, 99, 132,0.5)',
  orange: 'rgba(255, 159, 64,0.5)',
  green: 'rgba(75, 192, 192,0.5)',
  blue: 'rgba(54, 162, 235,0.5)'
};

var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};


var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['Blue', 'Red', 'Green', 'Orange'],
    datasets: [{
      fill: false,
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
      ],
      backgroundColor: [
        chartColors.blue,
        chartColors.red,
        chartColors.green,
        chartColors.orange
      ],
    }],
  },
  options: {
    scales: {
      yAxes: [{
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          mirror: true,
          padding: 10
        }
      }],
      xAxes: [{
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          display: false
        }
      }]
    },
    legend: {
      display: false
    },
    title: {
      display: false,
    }
  }
});