How can I put sign (%) on data in ChartJS?

Question

I want to add the sign (%) next to the value. The problem is when I concatenate sign (%) the pie chart is not showing data: vm.distributed_per_day.map(item => (item.Amount / sum * 100).toFixed(2) + '%'). How can I add the sign (%) to my pie chart? Can somebody help me with my problem? Here's my code

  retrieveDistributedPerDayByPie : function() {
        var self = this;
        var sum = 0;

        axios.post(this.urlRoot + this.api + "retrieve_transaction_per_day.php")
        .then(response => {
            console.log(response);
            vm.distributed_per_day = response.data
                var ctxChart = self.$refs.myChart2.getContext('2d');

                for(var i = 0; i < this.distributed_per_day.length; i++) {
                    sum += parseFloat(this.distributed_per_day[i].Amount);
                }

                var myChart2 = new Chart(ctxChart, {
                    type: 'pie',
                    data: {
                        labels: vm.distributed_per_day.map(item => item.Day),
                        datasets: [{
                        label: 'Total Amount',
                        data: vm.distributed_per_day.map(item => (item.Amount / sum * 100).toFixed(2) + '%'),
                        backgroundColor: this.poolColors(vm.distributed_per_day.length),
                        borderColor: '#eee',
                        borderWidth: 2
                    }]
                },
                reponsive : true,
                options: {
                    title : {
                        display : true,
                        text : "Distributed Reports per Day",
                        fontFamily: "sans-serif",
                        fontSize: 18,
                    },
                    legend: {
                        display: false
                     },
                     tooltips: {
                        enabled: true
                     }
                }
            });
        }).catch(e => {
            console.log(e)
        });
    },

is this for a tooltip or a label? I think it's because you are not separating data from presentation. the data should be an array of numbers, not strings. see docs https://www.chartjs.org/docs/latest/charts/doughnut.html — James South, Aug 22 '19 at 22:45
If you want to add it in your tooltip, you can check this answer - https://stackoverflow.com/questions/34720530/chart-js-v2-add-prefix-or-suffix-to-tooltip-label — Diego Armando Maradona, Aug 22 '19 at 23:14

score 1 · Answer 1 · answered Aug 23 '19 at 15:29

1

This works on a bar chart, haven't tried it on a pie chart. Hope it works for you.

yAxes: [
    {
        ticks: {
            callback: function (value, index, values) {
                return value + " %";
            }
        }
    }
]

answered Aug 23 '19 at 15:29

Seán Gahan

84
10

score 1 · Answer 2 · answered Oct 16 '20 at 02:00

This solution worked for me.

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

How can I put sign (%) on data in ChartJS?

2 Answers2