Chart.JS: How can I only display data labels when the doughnut size is big enough for the text?

Question

I am using Chart.JS with the Chart.JS datalabel plugin . Is it possible to only show the data labels when the doughnut slice size is big enough for the text?

I have the following example:

https://jsfiddle.net/7vg5w4mq/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
        plugins: [ChartDataLabels],
    type: 'doughnut',
    options:{
      plugins: {
        datalabels: {
          color: '#000000',
          display: true,
          formatter: function (value, ctx) {
            return value + " kWh";
          }
        }
      },
      rotation: 1 * Math.PI,
      circumference: 1 * Math.PI
    },
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red1", "Blue1", "Yellow1", "Green1", "Purple1", "Orange1", "Red2", "Blue2", "Yellow2", "Green2", "Purple2", "Orange2"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    }
});

I know, this example doesn't make any sense, but you can see the issue.

If there is a lot of data, the data labels overflow the doughnut slice size like this:

Is there an option to tell Chart.JS to only show these labels when the text fits into the doughnut? (Otherwise just show the tooltips).

The option to just check the percentage of the values does not work because the chart itself (Or the size of the browser window) can be resized to a very small size (And the percentages would no longer fit).

Note: This is not the same question as Chart.JS: How can I only display data labels when the bar width is big enough for the text? because there I'm asking for the same thing, but for a bar chart!

Answer 1

have you try @FranzHuber23 https://stackoverflow.com/a/56275124/6734130 answer by adding it on formatter: ? Even thought it did't show 'kWh' after the number label, you can add a chat legend that explain the data value show in 'kWh' unit

Answer 2

I'm now using a combination of two ideas:

• Show values only if a certain percentage threshold of the value is not underrun
• Show values only if a certain graph width is not underrun

The example below shows the idea(s):

formatter: function(value) {
    let percentage = (value.toFixed(2) / sum) * 100;

    if (percentage > 100) {
        percentage = 100;
    }

    if (percentage < 10) {
        return "";
    }

    if (ctx.width <= 200) {
        return "";
    }

    return value + " kWh";
}