Reputation: 65
Can't display data labels in chartJS
I have a web app written with ASP .NET Core, on one of the pages there is a bar chart created using chartJS (it gets data from database). I'm trying to display data values over each bar in the chart. I tried using this plugin, but then my chart doesn't show on the page and I'm getting the following errors: Uncaught ReferenceError: ChartDataLabels is not defined and Uncaught TypeError: Cannot set property 'datalabels' of undefined:
Here is my code for the chart:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div>
<canvas id="workTSChart_MTK"></canvas>
</div>
<script>
$(document).ready(function () {
$.ajax({
type: "Get",
url: '@Url.Action("OnGetWorkTSData_MTK","home")',
contentType: "application/json",
dataType: "json",
success: function (response) {
var data = response.hrPlan;
var data2 = response.hrReestr;
var data3 = response.hrFact;
console.log("hrPlan=" + response.hrPlan);
console.log("hrSub=" + response.hrReestr);
console.log("hrFact=" + response.hrFact);
var ctx = document.getElementById("workTSChart_MTK");
var workTSChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: [
'ООО "МТК"',
],
datasets: [{
label: 'Plan',
data: [response.hrPlan],
backgroundColor: 'rgb(161, 221, 239)',
borderColor: 'rgb(161, 221, 239)',
},
{
label: 'Sub',
data: [data2],
backgroundColor: 'rgb(254, 171, 133)',
borderColor: 'rgb(254, 171, 133)',
},
{
label: 'Fact',
data: [data3],
backgroundColor: 'rgb(127, 137, 138)',
borderColor: 'rgb(127, 137, 138)',
}]
},
options: {
responsive: true,
scales: {
y: {
max: 600000,
min: 500000,
ticks: {
stepSize: 10000,
}
}
},
plugins: {
datalabels: {
color: '#000000',
display: true,
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Sample title'
}
}
},
});
},
error: function (response) {
alert(response.responseText);
console.log("This is ERROR line");
}
});
});
</script>
What am I missing?
UPDATE:
I've updated my code thanks to @LeeLenalee's advice, but now I'm getting another error message: Uncaught TypeError: Cannot read property 'skip' of undefined
Updated code:
<div>
<canvas id="workTSChart_MTK"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "Get",
url: '@Url.Action("OnGetWorkTSData_MTK","home")',
contentType: "application/json",
dataType: "json",
success: function (response) {
var data = response.hrPlan;
var data2 = response.hrReestr;
var data3 = response.hrFact;
console.log("hrPlan=" + response.hrPlan);
console.log("hrSub=" + response.hrReestr);
console.log("hrFact=" + response.hrFact);
var ctx = document.getElementById("workTSChart_MTK");
var workTSChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: [
'ООО "МТК"',
],
datasets: [{
label: 'Plan',
data: [response.hrPlan],
backgroundColor: 'rgb(161, 221, 239)',
borderColor: 'rgb(161, 221, 239)',
},
{
label: 'Sub',
data: [data2],
backgroundColor: 'rgb(254, 171, 133)',
borderColor: 'rgb(254, 171, 133)',
},
{
label: 'Hour',
data: [data3],
backgroundColor: 'rgb(127, 137, 138)',
borderColor: 'rgb(127, 137, 138)',
}]
},
options: {
responsive: true,
scales: {
y: {
max: 600000,
min: 500000,
ticks: {
stepSize: 10000,
}
}
},
plugins: {
datalabels: {
color: '#000000',
display: true,
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Sample title'
}
}
},
});
},
error: function (response) {
alert(response.responseText);
console.log("This is ERROR line");
}
});
});
</script>
UPDATE 2: As it turns out, there is an updated version of chartjs-plugin-datalabels that is working with ChartJS 3.0, so the solution was to implement latest versions of both as shown below:
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
</body>
Upvotes: 2
Views: 3468
Answers (1)
Reputation: 31361
As stated in the documentation you will need to have at least Chart.js version 2.7.0 installed, you are currently using 2.3.0.
After that you either have to register the plugin globally by calling Chart.plugins.register(ChartDataLabels); so all the charts have the datalabels or register it locally to the chart you want the labels for as shown in the example below:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
},
plugins: [ChartDataLabels]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</body>Upvotes: 2
Related Questions
- Label is not showing in ChartJS
- Datalabels not showing on Chart.js
- ChartJS shows chart but no data in ASP net core
- Cannot visualise chartJS data in ASP .NET Core
- How show data label in the graph on Chart.js?
- How to connect a charts.js chart to data
- Display Labels with Charts.JS
- chartjs & asp.net: Cannot read property 'labels' of undefined
- Chartjs bar dataset label not showing
- Chart.js dataset label issue