javascript - ¿Cómo dibujar etiquetas externas para un gráfico polar usando ng2-charts y chart.js en posiciones fijas fuera de los anillos?

Estoy dibujando un gráfico polar con chart.js ^2.8.0 y ng2-charts ^2.3.0 en Angular. He utilizado chartjs-plugin-datalabels para mostrar etiquetas, pero esto no admite etiquetas fuera en posiciones fijas fuera de los anillos del gráfico polar, como este complemento para chart.js que muestra etiquetas fuera del gráfico circular.

CÓDIGO:

myColors = [{ backgroundColor: ["rgb(203, 75, 75, 0.5)", "rgb(237, 194, 64, 0.5)", "rgb(175, 216, 248, 0.5)"] }];

ChartPlugins = [pluginDataLabels];

polarAreaChartOptions: ChartOptions = {
    
    plugins: {
      datalabels: {
         color: '#000000',
         anchor: 'end',
         align: 'end',
         padding: 50,
         display: true,
         font: {
           weight: 'bolder'
         },
         formatter: function(value, ctx) {
          return `${ctx.chart.data.labels[ctx.dataIndex]} - ${value} %`;
       },
      },
    },
    scale: {
      ticks: {
          beginAtZero: true,
          max: 100,
          min: 0,
          stepSize: 10
      },
      gridLines: {
        color: ['gray', 'gray', 'gray', 'gray', 'red','gray', 'gray', 'gray', 'gray', 'gray'],
        lineWidth: [1, 1, 1, 1, 3, 1, 1, 1, 1, 1]
      }
    }
  };
        
polarAreaChartType: ChartType = "polarArea"; 

Marcado

<canvas id="polar-chart" baseChart height="40vh" width="120vw" 
                        [data]="polarAreaChartData" 
                        [labels]="polarAreaChartLabels"
                        [legend]="polarAreaLegend"
                        [plugins]="ChartPlugins"
                        [options]="polarAreaChartOptions"
                        [chartType]="polarAreaChartType" 
                        [colors]="myColors">        
                    </canvas>

¿Hay algún complemento o añadido para mostrar las etiquetas afuera de los anillos en polar chart.js y ng2-charts?

Respuesta #1

Si actualizas a chart.js V3 puedes usar los pointLabels incorporados y centrarlos:

const options = {
  type: 'polarArea',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    scales: {
      r: {
        pointLabels: {
          display: true,
          centerPointLabels: true
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>