Chartjs polar area curved labels

Question

I'm trying to create curved labels for a Polar Area graph using Chart.js, like this:

I have found this issue where they discuss it, but it doesn't seem to have an answer yet.

So far, I'm only being able to display the labels at the side of the graph, but not in a curved way:

Chart.register( ChartDataLabels );


const config = {
    "type": "polarArea",
    "data": {
        "labels": [
            "aaaaaaaa",
            "bbbbbbbb",
            "cccccccc",
            "dddddddd",
            "eeeeeeee",
            "ffffffff",
            "gggggggg",
            "hhhhhhhh"
        ],
        "datasets": [
            {
                "data": [
                    80,
                    40,
                    54,
                    62,
                    71,
                    45,
                    50,
                    85
                ],
                "backgroundColor": [
                    "#674ea7",
                    "#db4b4b",
                    "#2f2f6e",
                    "#3c1414",
                    "#fc3631",
                    "#556b2f",
                    "#820000",
                    "#76a5af"
                ]
            }
        ]
    },
    "options": {
        "responsive": true,
        "scales": {
            "r": {
                "angleLines": {
                    "display": true
                },
                "ticks": {
                    "display": false
                },
                "pointLabels": {
                  "display": true,
                  "centerPointLabels": true,
                  "font": {
                    "size": 14
                  }
                }
            }
        },
        "scale": {
            "min": 0,
            "max": 100,
            "ticks": {
                "display": false,
                "beginAtZero": true
            }
        },
        "plugins": {
            "legend": {
                "position": 'top',
            },
            "datalabels": {
                "formatter": (value, context) => value + '%',
                "color": "#ffffff"
            }
        }
    }
}

const ctx = document.getElementById( 'graph' ).getContext( '2d' );

const chart = new Chart( ctx, config );

Does anyone know how to do it?

Answer 1

Fraser suggested to use chartjs-plugin-labels. The problem is, that chartjs-plugin-labels is no longer maintained and doesn't support Chart.js v3.

Therefore, you should use chart.js-plugin-labels-dv. This plugin was forked from chartjs-plugin-labels and adapted for Chart.js v3.

plugins: {
  labels: {
    arc: true,
    fontColor: '#000',
    position: 'outside',
    fontSize: 14,
    render: (args) => args.dataset.helper ? args.label : '',
    fontColor: (args) => legendLabelColors[args.index] 
  }
}

Note that labels.render makes sure, that the data labels are drawn for the outer (helper) dataset only.

Please take a look at your amended and runnable code and see how it works.

Chart.register( ChartDataLabels );

const legendLabelColors = ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)", "rgb(54, 162, 88)"];

const config = {
    type: "polarArea",
    data: {
        labels: ["aaaaaaaa", "bbbbbbbb", "cccccccc", "dddddddd", "eeeeeeee", "ffffffff", "gggggggg", "hhhhhhhh"],
        datasets: [
            {
                data: [80, 40, 54, 62, 71, 45, 50, 85],
                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)", "rgba(153, 102, 255, 0.5)", "rgba(201, 203, 207, 0.5)", "rgba(54, 162, 88, 0.5)"],
                datalabels: {
                   formatter: (value, context) => value + '%',
                   color: "#ffffff"
                },
            },
            {
                helper: true,
                data: [100, 100, 100, 100, 100, 100, 100, 100],
                backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)", "rgba(54, 162, 88, 0.2)"],
                datalabels: {
                   display: false
                }
            }
        ]
    },
    options: {
        layout: {
          padding: 20
        },
        scales: {
            r: {
                angleLines: {
                    display: true
                },
                ticks: {
                    display: false
                },
                pointLabels: {
                  display: false
                }
            }
        },
        scale: {
            min: 0,
            max: 100
        },
        plugins: {
            labels: {
              arc: true,
              fontColor: '#000',
              position: 'outside',
              fontSize: 14,
              render: (args) => args.dataset.helper ? args.label : '',
              fontColor: (args) => legendLabelColors[args.index] 
            }
        }
    }
}

const chart = new Chart( 'graph', config );

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js"></script>
<canvas id="graph"></canvas>