Horizontal Bar Chart Label Position
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: {
animation: {
duration: 1,
onComplete: function() {
var chartInstance = this.chart;
ctx.font = Chart.helpers.fontString(16, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var label = bar._model.label;
var xOffset = 10;
var yOffset = bar._model.y - 42;
ctx.fillText(label, xOffset, yOffset);
});
});
}
},
scales: {
yAxes: [{
gridLines: {
display: false,
drawBorder: false
},
ticks: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false,
drawBorder: false
},
ticks: {
display: false
}
}]
},
legend: {
display: false
},
title: {
display: false,
}
}
});