How to show percentage (%) in chart js

Question

I want to show a percentage sign in the chart.I take data from my database from controller and show the data from vue js file.Here is my chart code.

<script>
import { Doughnut } from 'vue-chartjs';

export default {
    props:['appurl'],
    extends: Doughnut,
    data(){
        return{
            item:[],
        }
    },
    mounted() {
        this.getData();
    },
    methods:{
        setChartLoader: function(e) {
            this.$emit('setChartLoader', e);
        },
        renderDoughnutChart(serviceName,serviceData){
            this.renderChart({
                datasets: [{
                    data: serviceData,
                    backgroundColor: [
                        'rgba(41, 121, 255, 1)',
                        'rgba(38, 198, 218, 1)',
                        'rgba(138, 178, 248, 1)',
                        'rgba(255, 100, 200, 1)',
                        'rgba(116, 96, 238, 1)',
                        'rgba(215, 119, 74, 1)',
                        'rgba(173, 92, 210, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(247, 247, 247, 1)',
                        'rgba(227, 247, 227, 1)',
                    ],
                }],

                // These labels appear in the legend and in the tooltips when hovering different arcs
                labels: serviceName,
            }, {responsive: true, maintainAspectRatio: false, cutoutPercentage: 80})
        },
        getData(){
            axios.get(this.appurl+'/dashboardgetdatadoughnut').then(response => {
                this.item = response.data;
                this.setChartLoader(false);
                this.renderDoughnutChart(this.item.serviceName,this.item.serviceCount)
            }).then(function(){

            });
        }
    },
}
</script>

Here is my controller

public function doughnutData()
{
    $serviceNameArray = array();
    $serviceConfirmed = DB::table('bookings')->whereDate('booking_date', date('Y-m-d'))
        ->select('status',DB::raw('round(count(*) *100 / (select count(*) from bookings WHERE booking_date = curdate())) as count'))
        ->groupBy('status')->get();

    $serviceCount = array();

    foreach($serviceConfirmed as $name)
    {
        array_push($serviceNameArray,$name->status);
        array_push($serviceCount,$name->count);
    }

    return ['serviceName'=>$serviceNameArray,
        'serviceCount'=>$serviceCount];
}

I want to show 67% in the chart but i can not show the % sign

Answer 1

in the chart options, you can use the tooltips callback to customize the tooltip.

here, the % sign is added to the standard tooltip text...

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      return data['labels'][tooltipItem['index']] + ': ' + data['datasets'][0]['data'][tooltipItem['index']] + '%';
    }
  }
}

see following working snippet...

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['confirmed', 'pending'],
    datasets: [{
      data: [67, 33],
      backgroundColor: [
        'rgba(41, 121, 255, 1)',
        'rgba(38, 198, 218, 1)',
        'rgba(138, 178, 248, 1)',
        'rgba(255, 100, 200, 1)',
        'rgba(116, 96, 238, 1)',
        'rgba(215, 119, 74, 1)',
        'rgba(173, 92, 210, 1)',
        'rgba(255, 159, 64, 1)',
        'rgba(247, 247, 247, 1)',
        'rgba(227, 247, 227, 1)',
      ],
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutoutPercentage: 80,
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return data['labels'][tooltipItem['index']] + ': ' + data['datasets'][0]['data'][tooltipItem['index']] + '%';
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>