1👍
✅
You can add labels using
afterDatasetsDraw
and change the steps using
stepSize
jQuery( document ).ready(function() {
var maxValue = 5200000;
var ctx = document.getElementById('myChart');
if(ctx){
var ctxn = ctx.getContext('2d');
var myChart = new Chart(ctxn, {
type: 'bar',
data: {
labels: ['Sale Estimate'],
datasets: [{
label: 'Original Sale Estimate',
data: [3950000],
backgroundColor: '#bcbec0'
}, {
label: 'Final Sale Price',
data: [maxValue],
backgroundColor: '#5a00fe'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stacked: true,
// Abbreviate the millions
callback: function(value, index, values) {
return '$ ' + value / 1e6 + 'M';
},
stepSize: 1000000, // <----- This prop sets the stepSize,
max: 6000000
}
}],
xAxes: [{
// Change here
gridLines : {
display : false
},
barPercentage: 0.8,
barThickness: 84,
stacked: true
}]
}, legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItems, data) {
var roundoffLabel = Math.round(tooltipItems.yLabel);
var millionAft = parseFloat(roundoffLabel);
return data.datasets[tooltipItems.datasetIndex].label +': ' + '$' + millionAft;
},labelTextColor: function(tooltipItem, chart) {
return '#000';
}
},
titleSpacing: 5,
backgroundColor: '#ffffff',
titleFontColor : '#000000',
cornerRadius : 0,
xPadding : 10,
yPadding : 10,
mode: 'index'
}
}
});
Chart.plugins.register({
afterDatasetsDraw: function(chart, easing) {
// To only draw at the end of animation, check for easing === 1
var ctx = chart.ctx;
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function(element, index) {
if (dataset.data[index] == 5000000) return;
// Draw the text in white, with the specified font
ctx.fillStyle = 'rgb(255, 255, 255)';
var fontSize = 16;
var fontStyle = 'bold';
var fontFamily = 'Arial';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
// Just naively convert to string for now
var dataString = dataset.data[index].toString();
// Make sure alignment settings are correct
ctx.textAlign = 'center';
ctx.textBaseline = 'text-top';
var padding = 30;
var position = element.tooltipPosition();
ctx.fillText((maxValue - dataset.data[index])/1000000, position.x, position.y - (fontSize / 2) - padding);
//ctx.fillText(dataset.data[index], position.x, position.y - (fontSize / 2) - padding);
padding = 12;
fontStyle = 'normal';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
ctx.fillText("million", position.x, position.y - (fontSize / 2) - padding);
});
}
});
}
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" type="text/javascript"></script>
<canvas id="myChart"></canvas>
Source:stackexchange.com