使用 Chart.js 在圆环图上显示标签

Question

I am really stuck at the moment.

Using Chart.js v3.2.1 to display some charts, which were working great.

Then when I attempted use the chartjs-plugin-datalabels plugin to display labels on a Doughnut chart, that chart no longer displays.

I can't see what I've done wrong. I'm in need of help!

Note: There are a lot of questions similar to this on Google and Stackoverflow but most of them are about previous versions, but my work has only approved for me to be working with the lastst version of Chart.JS.

 //DOUGHNUT GRAPH var doughnutChartData = { labels: [ 'Dr @ Fault', 'TP @ Fault', 'Wthr Evt', 'Other' ], datasets: [ { label: "slices", borderWidth: 3, data: [2,3,2,1], backgroundColor: [ '#D6001C', '#00A3E0', '#52A886', '#2E3138' ], borderColor: [ '#fff', '#fff', '#fff', '#fff' ] } ] }; //DOUGHNUT CHART OPTIONS var doughnutChartOptions = { responsive: true, plugins: { datalabels: { formatter: function (value, context) { return context.chart.data.labels[ context.dataIndex ]; }, }, title: { display: true, text: "Reported Fault Allocation", color: "#D6001C", font: { family: "AvenirNextLTW01-Regular", size: 16, style: 'normal' } }, legend: { display: false } }, scales: { x: { grid: { display: false, drawBorder: true } }, y: { grid: { display: true, drawBorder: true, }, }, }, elements: { point: { radius: 0 } }, } //DISPLAY DOUGHNUT GRAPH var ctx = document.getElementById("canvas3-detailed").getContext("2d"); window.myDoughnut = new Chart(ctx, { plugins: [ChartDataLabels], type: "doughnut", data: doughnutChartData, options: doughnutChartOptions });

 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script> <canvas id="canvas3-detailed"></canvas>

Answer 1

The link for your Plugin is broken. You need to remove @2 from the end:

https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels

There is also the not defined error because you reference ChartDataLabels which has not been declared. You need to put it in a string:

 //DOUGHNUT GRAPH var doughnutChartData = { labels: [ 'Dr @ Fault', 'TP @ Fault', 'Wthr Evt', 'Other' ], datasets: [ { label: "slices", borderWidth: 3, data: [2,3,2,1], backgroundColor: [ '#D6001C', '#00A3E0', '#52A886', '#2E3138' ], borderColor: [ '#fff', '#fff', '#fff', '#fff' ] } ] }; //DOUGHNUT CHART OPTIONS var doughnutChartOptions = { responsive: true, plugins: { datalabels: { formatter: function (value, context) { return context.chart.data.labels[ context.dataIndex ]; }, }, title: { display: true, text: "Reported Fault Allocation", color: "#D6001C", font: { family: "AvenirNextLTW01-Regular", size: 16, style: 'normal' } }, legend: { display: false } }, scales: { x: { grid: { display: false, drawBorder: true } }, y: { grid: { display: true, drawBorder: true, }, }, }, elements: { point: { radius: 0 } }, } //DISPLAY DOUGHNUT GRAPH var ctx = document.getElementById("canvas3-detailed").getContext("2d"); window.myDoughnut = new Chart(ctx, { plugins: ["ChartDataLabels"], type: "doughnut", data: doughnutChartData, options: doughnutChartOptions });

 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <canvas id="canvas3-detailed"></canvas>

Answer 2

I found out that the version of the plugin I used was incorrect. I have now updated and it is displaying with labels!

 //DOUGHNUT GRAPH var doughnutChartData = { labels: [ 'Dr @ Fault', 'TP @ Fault', 'Wthr Evt', 'Other' ], datasets: [{ label: "slices", borderWidth: 3, data: [2, 3, 2, 1], backgroundColor: [ '#D6001C', '#00A3E0', '#52A886', '#2E3138' ], borderColor: [ '#fff', '#fff', '#fff', '#fff' ] }] }; //DOUGHNUT CHART OPTIONS var doughnutChartOptions = { responsive: true, plugins: { datalabels: { color: 'white', formatter: function (value, context) { return context.chart.data.labels[ context.dataIndex ]; }, }, title: { display: true, text: "Reported Fault Allocation", color: "#D6001C", font: { family: "AvenirNextLTW01-Regular", size: 16, style: 'normal' } }, legend: { display: false } }, scales: { x: { grid: { display: false, drawBorder: true } }, y: { grid: { display: true, drawBorder: true, }, }, }, elements: { point: { radius: 0 } }, } //DISPLAY DOUGHNUT GRAPH var ctx = document.getElementById("canvas3-detailed").getContext("2d"); window.myDoughnut = new Chart(ctx, { plugins: [ChartDataLabels], type: "doughnut", data: doughnutChartData, options: doughnutChartOptions });

 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script> <canvas id="canvas3-detailed"></canvas>