Doughnut labes not showing for smaller slices

[Swts]

Hi there,
doughnut char labels are not showing properly when there is a smller slice in the chart.
I am trying to use it using the web url. let me share the configuration I am trying here on for reference :

Chart.js Sandbox Editor

{
  type: 'doughnut',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{
      label: 'Users',
      data: [5, 5, 55, 555, 5555, 55]
    }]
  },
  options: {
    plugins: {
      datalabels: {
        display: true,
        backgroundColor: '#ccc',
        borderRadius: 3,
        font: {
          color: 'red',
          weight: 'bold',
        }
      },
      doughnutlabel: {
        labels: [{
          text: '550',
          font: {
            size: 20,
            weight: 'bold'
          }
        }, {
          text: 'total'
        }]
      }
    }
  }
}

the solutions or response would be very helpfull. thanks.

[ian]

Hi @Swts,

What is the desired behavior here? The area is too small to show all the labels. If you set display: 'auto' for datalabels, then overlapping labels will be prevented based on the following rules:

• if both labels are display: true, they will be drawn overlapping
• if both labels are display: ‘auto’, the one with the highest data index will
  be hidden.
• If labels are at the same data index, the one with the highest dataset index will
  be hidden.
• If one label is display: true and the other one is display: ‘auto’, the one with ‘auto’ will be hidden (whatever the data/dataset indices)

Here’s a link to your modified chart

See datalabels documentation for more info.

You may also be interested in the outlabeledPie chart type (documentation). It is not compatible with the doughnutlabels plugin though.

Here’s an example