Displaying labels on a Doughnut Chart using 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

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/[email protected]"></script>
<canvas id="canvas3-detailed"></canvas>

Answer 2

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>