Chartjs-Chart.js v3.60 – Add % symbol to the end of the tooltip label on a doughnut chart?

by

0👍

Here’s a working example:

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [0.12, 0.19, 0.3, 0.5, 0.2],
            backgroundColor: [
                '#b59671',
                '#c7ba53',
                '#7da35a',
                '#4c77ba',
                '#000000'
            ],
            borderColor: [
                '#b59671',
                '#c7ba53',
                '#7da35a',
                '#4c77ba',
                '#000000'
            ],
            borderWidth: 1,
        }]
    },
    options: {
        cutout: 300,
        hoverOffset: 8,
        plugins: {
            tooltip: {
                displayColors: false,
                callbacks: {
                    label: function(context) {
                        let label = new Intl.NumberFormat('en-US', {
                            style: 'percent',
                            minimumFractionDigits: 0,
                            maximumFractionDigits: 0
                        }).format(context.formattedValue);
                        return label;
                    },
                    title: function(context) {
                      let title = context[0].label;
                      return title;
                    }
                },
            }
        }
    }
});

0👍

A short solution would be just adding the % after the {data.formattedValue} bit:

plugins: {
    tooltip: {
        callbacks: {label: data => `${data.formattedValue}%` }}}

Leave a comment