Chart.js Offset tick labels
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
JavaScript
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Value 1', 'Value 2', 'Value 3', 'Value 4'],
datasets: [{
label: "Dataset",
data: [20, 15, 27, 18],
backgroundColor: 'rgba(54, 162, 235,0.5)',
}],
},
options: {
animation: {
duration: 1,
onComplete: function() {
var controller = this.chart.controller;
var chart = controller.chart;
var yAxis = controller.scales['y-axis-0'];
yAxis.ticks.forEach(function(value, index) {
var xOffset = chart.width - 40;
var yOffset = ((chart.height - 60) / 2 * index) + 15;
ctx.fillText(value + 'M', xOffset, yOffset);
});
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
}
}],
yAxes: [{
position: "right",
gridLines: {
drawBorder: false,
},
ticks: {
maxTicksLimit: 3,
display: false
}
}]
}
}
});