-1

I'm using the library chartJs to display the data that i get from my MySQL database. In the fucntion below, AddValuesToNavigatorChart takes the browsers data and the percentage data and displays them on the pie chart. What i need to know, is how to add '%' in my labels ? I found few answer with getContent('2d').. using the old way, but it's not working. This is the function :

 function AddValuesToNavigatorChart(browsers, percentage) {
            checkNavigatorChart()
            const data = {
                labels: browsers,
                datasets: [{
                    data: percentage,
                    backgroundColor: [
                        'rgb(192,192,192)',
                        'rgb(255,0,0)',
                        'rgb(0,0,0)',
                        'rgb(105,105,105)'
                    ],
                    hoverOffset: 4
                }]
            };
            const config = {
                tooltips: {
                    enabled: false
                },
                type: 'pie',
                data: data,
                plugins: [ChartDataLabels],
                options: {
                    showTooltips: false,
                    plugins: {
                        datalabels: {
                            color: 'rgb(255,255,255)',
                            borderWidth: '2',
                            align: 'top'
                        },
                        legend: {
                            position: 'bottom',
                            align: 'center',
                            labels: {
                                boxWidth: 12,
                                padding: 15,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        },
                        title: {
                            text: 'Navigator Chart',
                            display: true,
                            color: 'rgb(0,0,0)',
                            position: 'top'
                        }
                    }
                }
            };
            const NavigatorChart = new Chart(
                document.getElementById('NavigatorChart'),
                config
            );
        }
sharlotte
  • 43
  • 5
  • You can define a `formatter` as described here: https://chartjs-plugin-datalabels.netlify.app/guide/formatting.html#data-transformation – uminder Jun 01 '22 at 11:13
  • Does this answer your question? [ChartJS: datalabels: show percentage value in Pie piece](https://stackoverflow.com/questions/52044013/chartjs-datalabels-show-percentage-value-in-pie-piece) – LeeLenalee Jun 01 '22 at 11:37

1 Answers1

0

Please provide the version of chartjs that you are using.

Did you mean you want to show the % in the label of the tooltip?

For version v3.8.0, here is a working code I have just made, Link

As in option, you can edit the label of tooltip as you want:

options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (tooltipItem) => {
              //tooltipItem is for the slice of the pie you are hovering now
              return ' ' + tooltipItem.parsed + '%';
            },
        }
      }
    }
  }
Ali Khaddour
  • 72
  • 4
  • The answer was as simple as adding these lines of code to the plugins.datalabels – sharlotte Jun 01 '22 at 11:33
  • formatter: function(value, context) { return Math.round(value / context.chart.getDatasetMeta(0).total * 100) + "%" } – sharlotte Jun 01 '22 at 11:33
  • It didn't work for me @sharlotte! Would you check it please? http://jsfiddle.net/edjyv8gs/6/ – Ali Khaddour Jun 01 '22 at 11:42
  • 1
    It wouldn't work, cause you don't display your DataLabels in the first place, what you need to do is add plugins : [ChartDataLabels] under (type:'pie') in your config along with these two scripts : – sharlotte Jun 01 '22 at 12:47