[Chartjs]-Chartjs polar area curved labels

by

2👍

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>

1👍

You can use chartjs-plugin-labels to achieve this

You can see a working example here

The key is to set arc to true and position to outside in the plugin options. e.g.

{
  labels: {
    render: 'label',
    arc: true,
    fontColor: '#000',
    position: 'outside'
  }
}

Leave a comment