How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?

Question

I am drawing polar chart with chart.js ^2.8.0 and ng2-charts ^2.3.0 in Angular. I have used chartjs-plugin-datalabels to display labels but this does not support lables outside at fixed positions outside the polar chart rings like this plugin for chart.js display labels outside the pie chart.

CODE:

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";

Markup

Is there any plugin or addon to display the labels outside the rings in polar chart.js and ng2-charts ?

user_8682983 · Answer

If you update to chart.js V3 you can use the build in pointLabels and center them:

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);

How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?

1 Answers