0

How do I need to modify this code below, in order to suffix a % symbol at the end of the tooltip value?

I've tried so many solutions from different posts, but they all seem to be v2.0 solutions. I am not sure what to write inside the callbacks line.

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [12, 19, 3, 5, 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: {

                }
            }
        }
    }
});
Sam Assoum
  • 437
  • 1
  • 8
  • 21
  • 1
    Does this answer your question? [Chart.JS tooltip callbacks label and title (v3.5)](https://stackoverflow.com/questions/69113861/chart-js-tooltip-callbacks-label-and-title-v3-5) – LeeLenalee Nov 18 '21 at 20:04
  • Yes it does! Amazing thanks, I definitely didn't come across this post. – Sam Assoum Nov 18 '21 at 20:10

2 Answers2

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;
                    }
                },
            }
        }
    }
});
Sam Assoum
  • 437
  • 1
  • 8
  • 21
0

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

plugins: {
    tooltip: {
        callbacks: {label: data => `${data.formattedValue}%` }}}
user3507584
  • 3,246
  • 5
  • 42
  • 66