Add a Label to the centre of a Radar chart to show Total

[elsteshepardo]

Hi,
I’ve used the quickchart API to create a couple of radar charts in PowerApps (got to say, amazing work!), I want to add a Label into the middle of the Radar. The Label is not the Title, Legend, Dataset - it’s the total of the values for a given array (which I can get from Powerapps).

Any ideas how I could achieve that?
Thanks

[ian]

Hi @elsteshepardo,

The best way to do this right now is by using the Chart.js Annotations plugin, specifically label annotations.

Here’s an example that will put a label in the middle of the radar chart. You can move it around using the xAdjust and yAdjust values. Note this is using Chart.js v3 or v4 (not v2 compatible):

{
  type: 'radar',
  data: {
    labels: [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
    ],
    datasets: [
      {
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
        borderColor: 'rgb(255, 99, 132)',
        data: [15.09, 15.67, 12.5, 12.77, 13.62, 13.68, 13.93, 15.95],
        label: 'D0',
      },
    ],
  },
  options: {
    plugins: {
      annotation: {
        annotations: {
          label1: {
            type: 'label',
            xValue: 0,
            yValue: 0,
            xAdjust: 0,
            yAdjust: 30,
            backgroundColor: 'transparent',
            content: ['This is my text', 'This is my text, second line'],
            font: {
              size: 12,
            },
          },
        },
      },
    },
  },
}

Example in chart sandbox

Hope this helps!