title: How to display the values inside the pie chart of PrimeNG (chart) using JavaScript or Angular
body: <p>I have imported the pie chart from the PRIMENG CHART PLUGIN</p>
  
  <p>i need to display the values inside a pie chart </p>
  
  <p>The below is my code please refer</p>
  
  <p><code>**In app.component.html**</code></p>
  
  <pre><code>&lt;div style="display: block"&gt;
      &lt;p-chart type="pie" [data]="data"&gt;&lt;/p-chart&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>**In app.component.ts**</code></p>
  
  <pre><code>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"
                  ]
              }]
          };
      }
  }
  </code></pre>
  
  <p>In the image i have attached the graph without any values displayed</p>
  
  <p>If there is negative  -- 50</p>
  
  <p>and positive -- 50</p>
  
  <p>these values should be displayed inside the graph </p>
  
  <p><strong>Actual result:</strong></p>
  
  <p>As of now the values are not displayed inside the graph</p>
  
  <p><strong>Expected result:</strong></p>
  
  <p>Those values should be displayed inside the graph
  <a href="https://i.stack.imgur.com/MxKXm.png" rel="nofollow noreferrer">The graph UI without the values displayed inside the graph</a></p>
  
  <p><a href="https://i.stack.imgur.com/bqQX2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bqQX2.png" alt="enter image description here"></a></p>