Add labels to a polar area chart

You can add labels to a Chart.js polar area chart using the chartjs-plugin-datalabels plugin. This plugin is built-in to QuickChart.

From there, use the datalabels options to style the labels to your liking. By default these options are configured on a per-chart basis, but note that most options are scriptable, meaning you can configure them on a per dataset, per-dataindex, or dynamic basis.

Here's a simple example that uses datalabels to show the name of the dataset (rather than the value):

{
  type: 'polarArea',
  data: {
    datasets: [
      {
        data: [3, 56, 61, 78, 83],
        backgroundColor: [
          'rgba(255, 99, 132, 0.5)',
          'rgba(255, 159, 64, 0.5)',
          'rgba(255, 205, 86, 0.5)',
          'rgba(75, 192, 192, 0.5)',
          'rgba(54, 162, 235, 0.5)',
        ],
        label: 'My dataset',
      },
    ],
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
  },
  options: {
    legend: {
      display: false,
    },
    plugins: {
      datalabels: {
        align: 'end',
        anchor: 'end',
        font: {
          size: 14,
          weight: 'bold',
        },
        formatter: (value, ctx) => {
          if (value > 10) {
            // Show label for slices that are visible.
            return ctx.chart.data.labels[ctx.dataIndex];
          }
          return null;
        },
      },
    },
  },
}

It yields this chart:

You can adjust the placement of the labels with respect to the slices by changing the values of align and anchor.

If you're interested in customizing the labels, see how to create custom data labels. The article talks mostly about pie and doughnut charts, but is applicable to polarArea charts as well.

Head back to docs to learn more or ask questions in the community.