Pie chart with labels having no overlapping of labels,

[rgoyal7605]

Hi,
I am trying to generate the Pie/Doughnut Chart using Char Js, But many times labels are getting overlapped. Tried to link labels with its section with line but all the lines are having same length, so purpose is not solved,
Can we generate the chart as shown in attached file. All the labels are visible

[anuragchvn-blip]

How to Prevent Overlapping Labels in Chart.js Pie/Doughnut Charts

If labels are overlapping in your Chart.js pie or doughnut chart, here are a few ways to fix it:

---

Solution 1: Use position: 'outside' with chartjs-plugin-datalabels

By default, Chart.js places labels inside the chart, which can cause overlap. The chartjs-plugin-datalabels plugin allows labels to be placed outside.

Steps to Implement:

1. Install the plugin:

   sh
   CopyEdit
   npm install chartjs-plugin-datalabels
   

2. Import and register it in your Chart.js configuration:

   javascript
   CopyEdit
   import Chart from 'chart.js/auto';
   import ChartDataLabels from 'chartjs-plugin-datalabels';
   Chart.register(ChartDataLabels);
   
   

3. Modify your chart configuration:

   javascript
   CopyEdit
   const chart = new Chart(document.getElementById('myChart'), {
     type: 'pie',
     data: {
       labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
       datasets: [{
         data: [10, 20, 30, 40],
         backgroundColor: ['red', 'blue', 'green', 'yellow'],
       }],
     },
     options: {
       plugins: {
         datalabels: {
           color: '#000',
           align: 'end',
           anchor: 'end',
           formatter: (value, ctx) => ctx.chart.data.labels[ctx.dataIndex], // Show labels
         },
       },
     },
   });
   

✅ Result: Labels will now be placed outside the pie chart.

---

Solution 2: Use chartjs-plugin-piechart-outlabels for Better Spacing

The chartjs-plugin-piechart-outlabels plugin is specifically designed to avoid label overlaps.

Steps to Implement:

1. Install the plugin:

   sh
   CopyEdit
   npm install chartjs-plugin-piechart-outlabels
   

2. Import and register it:

   javascript
   CopyEdit
   import Chart from 'chart.js/auto';
   import PieChartOutlabels from 'chartjs-plugin-piechart-outlabels';
   Chart.register(PieChartOutlabels);
   
   

3. Configure your chart:

   javascript
   CopyEdit
   const chart = new Chart(document.getElementById('myChart'), {
     type: 'doughnut',
     data: {
       labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
       datasets: [{
         data: [10, 20, 30, 40],
         backgroundColor: ['red', 'blue', 'green', 'yellow'],
       }],
     },
     options: {
       plugins: {
         outlabels: {
           display: true,
           color: 'black',
           text: '%l', // %l = label name
           stretch: 20, // Adjusts spacing to prevent overlap
           font: { resizable: true, minSize: 12, maxSize: 18 },
         },
       },
     },
   });
   

✅ Result: The labels are automatically arranged to prevent overlapping.

---

Solution 3: Manually Adjust Label Placement

If plugins don’t work for your case, you can manually position labels by adjusting the padding and align options:

javascript
CopyEdit
options: {
  plugins: {
    legend: {
      position: 'right', // Move legend to the side to reduce overlap
    },
    datalabels: {
      align: 'start',  // Moves labels slightly away from the center
      offset: 10,       // Adds space between label and pie slice
    },
  },
}

✅ Result: More spacing between labels.

---

Best Solution for Your Case?

Solution	Best For	Pros	Cons
chartjs-plugin-datalabels	Simple fixes	Easy to implement	Labels may still overlap
chartjs-plugin-piechart-outlabels	Dynamic positioning	Best for avoiding overlaps	Requires installation
Manual Label Adjustments	Full control	No need for extra plugins	Requires tweaking for each chart

Final Recommendation:

• ✅ Use chartjs-plugin-piechart-outlabels for fully automated label positioning.
• ✅ If you want a quick fix, try chartjs-plugin-datalabels with align: 'end'.