[Chartjs]-Displaying labels on a Doughnut Chart using Chart.js

by

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>

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/chartjs-plugin-datalabels@2.0.0-rc"></script>
<canvas id="canvas3-detailed"></canvas>

Leave a comment