2👍
✅
Better draw the labels using a plugin, instead of drawing on animation compete (this is the culprit).
plugins: [{
animationCompleted: false,
afterDatasetsDraw: function(chart, ease) {
if (!this.animationCompleted && ease !== 1) return;
this.animationCompleted = true;
var ctx = chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = "grey";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
var dataset = chart.data.datasets[1];
for (var i = 0; i < dataset.data.length; i++) {
for (var key in dataset._meta) {
var model = dataset._meta[key].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 1);
} //for key
} //for i
}
}]
* add this followed by your chart options.
var ctx = document.getElementById("testChart").getContext("2d");
// ctx.canvas.width = 300;
// ctx.canvas.height = 300;
var data = {
labels: ["uno", "dos", "tres", "quattro"],
datasets: [{
label: "Invisible",
data: [0, 20, 60, 0],
backgroundColor: "transparent",
}, {
label: "Dollar",
data: [20, 40, 30, 90],
backgroundColor: "lightgreen",
}, ] //datasets
};
var options = {
responsive: true,
scales: {
xAxes: [{
display: true,
stacked: true,
}, ], //xAxes
yAxes: [{
display: true,
stacked: true,
ticks: {
beginAtZero: true,
min: 0,
max: 120,
} //ticks
}, ] //yAxes
}, //scales
title: {
display: true,
text: "Waterfall chart",
},
legend: {
display: false,
labels: {
boxWidth: 80,
fontColor: 'green'
}
},
tooltips: {
enabled: false
}, //tooltips
}; //options
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options,
plugins: [{
animationCompleted: false,
afterDatasetsDraw: function(chart, ease) {
if (!this.animationCompleted && ease !== 1) return;
this.animationCompleted = true;
var ctx = chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = "grey";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
var dataset = chart.data.datasets[1];
for (var i = 0; i < dataset.data.length; i++) {
for (var key in dataset._meta) {
var model = dataset._meta[key].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 1);
} //for key
} //for i
}
}]
});
p,
canvas {
border: 1px solid red;
}
#canvasWrapper {
border: 1px solid green;
padding: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<p>Lorem</p>
<p>ipsum</p>
<div id="canvasWrapper">
<canvas id="testChart"></canvas>
</div>
<p>Lorem</p>
<p>ipsum</p>
Refer here to learn more about ChartJS Plugins.
Source:stackexchange.com