-2

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

enter image description here

shmosel
  • 49,289
  • 6
  • 73
  • 138
John
  • 9
  • 3
  • Duplicate of https://stackoverflow.com/questions/52044013/chartjs-datalabels-show-percentage-value-in-pie-piece – Nouphal.M Dec 29 '21 at 06:59
  • Does this answer your question? [How can I show percentages when hovering over my chart?](https://stackoverflow.com/questions/44121189/how-can-i-show-percentages-when-hovering-over-my-chart) – LeeLenalee Dec 29 '21 at 10:30

1 Answers1

0

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.

uminder
  • 23,831
  • 5
  • 37
  • 72