How can i get my chartjs to show up graphically? - chart.js

Question

for example, when i load the page, i would like to visually appear slowly, instead of just popups already loaded
For example, when i load this bar graph, everything appears slowly with the nice visualization onto the screen, i think it adds a nice affect
this is my script
<script>
var department = {{department|safe}};
var incomplete = {{incomplete|safe}};
var complete = {{complete|safe}};
// Return with commas in between
var numberWithCommas = function (x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
// Chart.defaults.global.elements.rectangle.backgroundColor = '#FF0000';
var bar_ctx = document.getElementById('bar-chart');
var bar_chart = new Chart(bar_ctx, {
type: 'bar',
data: {
labels: department,
datasets: [
{
label: 'incomplete',
data: incomplete,
backgroundColor: "rgba(55, 160, 225, 0.7)",
hoverBackgroundColor: "rgba(55, 160, 225, 0.7)",
hoverBorderWidth: 2,
hoverBorderColor: 'lightgrey'
},
{
label: 'complete',
data: complete,
backgroundColor: "rgba(225, 58, 55, 0.7)",
hoverBackgroundColor: "rgba(225, 58, 55, 0.7)",
hoverBorderWidth: 2,
hoverBorderColor: 'lightgrey'
},
]
},
options: {
animation: {
duration: 10,
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
}
}
},
scales: {
xAxes: [{
stacked: true,
gridLines: { display: false },
}],
yAxes: [{
stacked: true,
ticks: {
callback: function (value) { return numberWithCommas(value); },
},
}],
}, // scales
legend: { display: true }
} // options
}
);
</script>

Answer 1

In the options object, there is an animation parameter:
animation: {
duration: 10,
},
I believe this is what you want.