How to display the values inside the pie chart of PrimeNG (chart) using JavaScript or Angular

Question

I have imported the pie chart from the PRIMENG CHART PLUGIN

i need to display the values inside a pie chart

The below is my code please refer

**In app.component.html**

<div style="display: block">
    <p-chart type="pie" [data]="data"></p-chart>
</div>

**In app.component.ts**

export class PieChartDemo {

    data: any;

    constructor() {
        this.data = {
            labels: ['A', 'B', 'C'],
            datasets: [{
                data: [300, 50, 100],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }]
        };
    }
}

In the image i have attached the graph without any values displayed

If there is negative -- 50

and positive -- 50

these values should be displayed inside the graph

Actual result:

As of now the values are not displayed inside the graph

Expected result:

Those values should be displayed inside the graph The graph UI without the values displayed inside the graph

Answer 1

This answer is correct but in app.component.ts you must import chartjs-plugin-datalabels

like this: import * as ChartDataLabels from 'chartjs-plugin-datalabels';

not like this: import ChartDataLabels from 'chartjs-plugin-datalabels';

Thank u so much Alexey.S!

Answer 2

It's late, and i think you already found an answer, but for future people this can be achieved as follows:

1. Install plugin: npm install chartjs-plugin-datalabels --save

2. It would be registred globaly, and we need to unregister it, in order to include only for certain charts; place it, for example, in init method of root component

    import * as Chart from 'chart.js';
    import ChartDataLabels from 'chartjs-plugin-datalabels';
    ...
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
   })
   
   export class AppComponent implements OnInit {
      chartJs = Chart;
      chartLabelPlugin = ChartDataLabels;
   
      constructor() {
      }
   
      ngOnInit(): void {
        this.chartJs.plugins.unregister(this.chartLabelPlugin);
     }
   }
   

3. Add plugin for certain chart

   import ChartDataLabels from 'chartjs-plugin-datalabels';
   ...
   
   plugin = ChartDataLabels; 
   options = {
     plugins: {
      datalabels: {
        /* show value in percents */
        formatter: (value, ctx) => {
          let sum = 0;
          const dataArr = ctx.chart.data.datasets[0].data;
          dataArr.map(data => {
                sum += data;
          });
          const percentage = (value * 100 / sum); 
          return percentage !== 0 ? percentage.toFixed(2) + '%' : '';
        },
        color: '#fff',
      }
     }
   }
   
   
   
   <-- html -->
   
    <p-chart [options]="options" 
             [data]="dataset" 
             [plugins]="plugin" 
             type="pie">
    </p-chart>
   
   <-- html -->