How to add percentage after value data in chart-CodePudding

I need after each value to be a percent symbol ( % ) For example: 12% instead of 12

The below code in write in laravel php for the chartpie.


<script src="{{asset('assets/admin/js/vendor/apexcharts.min.js')}}"></script>
<script src="{{asset('assets/admin/js/vendor/chart.js.2.8.0.js')}}"></script>

<script>
 
    var ctx = document.getElementById('tokenomi');
    var myChart = new Chart(ctx, {
        
        type: 'doughnut',
        data: {
            labels:<?=$label?>,
            datasets: [{
                data:<?=$values?>,                    
                ],
                borderColor: [
                    'rgba(231, 80, 90, 0.75)'
                ],
                borderWidth: 0,

            }]
        },
        options: {
            aspectRatio: 1,
            responsive: true,
            maintainAspectRatio: true,
            elements: {
                line: {
                    tension: 0 // disables bezier curves
                }
            },
            scales: {
                xAxes: [{
                    display: false
                }],
                yAxes: [{
                    display: false
                }]
            },
            legend: {
                display: false,
            }
        }
    });       
</script>

Check the current chart pie below, I tried a lot but I can't find a solution. How do I add percent sign (%) behind of all values Thanks

CodePudding user response：

You need to define a tooltips.callback.label function as shown below. For further details please consult Chart.js v. 2.8.0 documentation here.

options: {
  ...
  tooltips: {
    callbacks: {
      label: (tooltipItem, data) => data.datasets[0].data[tooltipItem.index]   '%'
    }
  },
  ...

Please note that you're using a rather old version of Chart.js, the today latest stable version is 3.7.0.

CodePudding user response：

options = { dataLabels: { 
    enabled: true, 
    formatter: function (val) { return val   "%" }
} }

Set the options for your data labels with a formatter like this one.