chartjs datalabels not showing anything with django template - django

Question

I tried so many time to ask this question but no one was able to help me so I decided to deleted the previous question and reask with taking into considerations the answers that I received.
I have this chart created with chartjs, as you can see you can hover over points to see their coordinated or data, I would like to have an option to show them without having to hover. The reason why I want to do this is because I am going to add export to pdf, and it exports whatever it can see on the HTML , and exporting a chart without its values would be unreadable to the end user.
Note (I don't know if this matters but I am using django and I did not do any npm installation of datalabels)
Another Note : I was told that I have to register the plugin before using it, with
Chart.register(ChartDataLabels); but adding it the chart script just causes the chart to disappear.
.cann {
border: 3px solid darkgrey;
padding: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
width: 650px;
height: 250px;
margin-left: 3em;
}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- semantic UI -->
<link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
<!--Chart js-->
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0-alpha"> </script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function (){
Chart.register(ChartDataLabels);
var ctx = document.getElementById('myChart');
window.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [12, 19, 3, 5, 2, 3],
label: 'Advisor Closed MTD',
backgroundColor: 'rgb(192,111,94)',
barThickness: 25,
datalabels: {
color: '#FFCE56'
}
}],
},
options: {
responsive: false,
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
labels: {
value: {
color: 'blue'
}
}
}
}
}
}
);
});
</script>
<canvas id="myChart" class="cann"></canvas>

Answer 1

How about instead of reposting and deleting you post each time so people dont know whats wrong you actually keep your post so people can actually help you because with what you provide its working fine, chart shows, with register the plugin shows so unless you point out where its going bad and people can see it you wont get any better answers
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.2.1">
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc"></script>
<canvas id="turn_over_line" class="cann"></canvas>
<script>
// Turn over line chart
$(document).ready(function() {
Chart.register(ChartDataLabels);
var ctx = document.getElementById('turn_over_line');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [0, 1, 2, 3, 2, 3, 0.5, 8, 4, 2],
datasets: [{
backgroundColor: '#ccddee',
borderColor: '#5566aa',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}]
},
options: {
legend: false,
tooltip: false,
plugins: {
datalabels: {
align: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
var invert = Math.abs(value) <= 1;
return value < 1 ? 'end' : 'start'
},
anchor: 'end',
backgroundColor: null,
borderColor: null,
borderRadius: 4,
borderWidth: 1,
color: '#223388',
font: {
size: 11,
weight: 600
},
offset: 4,
padding: 0,
formatter: function(value) {
return Math.round(value * 10) / 10
}
}
}
}
});
})
</script>

Answer 2

Actually my code was perfectly fine, I appreciate the effort of the guy who kept posting the same answer that did not help, I finally figured out that the issue is in my chartjs version , so if you are facing the same issue with chartjs 3.0.0-alpha , 3.2.1 seemed to fix it for me.