[Chartjs]-How to show percentage (%) using chartjs-plugin-labels ( Pie chart ) in angular 2/8

by

11👍

✅

JavaScript

The following sample was extracted from the chartjs-plugin-labels demo page. 

var canvas = document.getElementById('myChart');
new Chart(canvas, {
    type: 'pie',    
    data: {
      labels: ['January', 'February', 'March'],
      datasets: [{
        data: [50445, 33655, 15900],
        backgroundColor: ['#FF6384', '#36A2EB','#FFCE56']
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        labels: {
          render: 'percentage',
          fontColor: ['green', 'white', 'red'],
          precision: 2
        }
      },
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>

Angular 8

The easiest and cleanest way to implement above pie chart in Angular 8, is to use ng2-charts. In order to activate the plugin chartjs-plugin-labels, you need the following lines in your component class:

import * as pluginLabels from 'chartjs-plugin-labels';
...
pieChartPlugins = [];

ngOnInit() {
    ...
    this.pieChartPlugins = [pluginLabels];
}

Please have a look at the following StackBlitz.

1👍

What i did to achieve this ..

 <chart [type]="type" [data]="data" [options]="options"></chart>

in ts file ..

   type = "pie";
    data: any;
    options:any;

ngAfterViewInit() {

this.options=  {
      plugins: {
        labels: {
          // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
          render: "percentage",

          // precision for percentage, default is 0
          precision: 0,

          // identifies whether or not labels of value 0 are displayed, default is false
          showZero: true,

          // font size, default is defaultFontSize
          fontSize: 12,

          // font color, can be color array for each data or function for dynamic color, default is defaultFontColor
          fontColor: "#000000",

          // font style, default is defaultFontStyle
          fontStyle: "normal",

          // font family, default is defaultFontFamily
          fontFamily:
            "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

          // draw text shadows under labels, default is false
          // textShadow: true,

          // text shadow intensity, default is 6
          shadowBlur: 10,

          // text shadow X offset, default is 3
          shadowOffsetX: -5,

          // text shadow Y offset, default is 3
          shadowOffsetY: 5,

          // text shadow color, default is 'rgba(0,0,0,0.3)'
          // shadowColor: "rgba(255,0,0,0.75)",

          // draw label in arc, default is false
          // bar chart ignores this
          arc: true,

          // position to draw label, available value is 'default', 'border' and 'outside'
          // bar chart ignores this
          // default is 'default'
          position: "outside",

          // draw label even it's overlap, default is true
          // bar chart ignores this
          overlap: true,

          // show the real calculated percentages from the values and don't apply the additional logic to fit the percentages to 100 in total, default is false
          showActualPercentages: true,

          // add padding when position is `outside`
          // default is 2
          outsidePadding: 4,

          // add margin of text when position is `outside` or `border`
          // default is 2
          textMargin: 4
        }
      }
    }
    //.........
    this.data = {
      labels: this.statusesName,
      datasets: [
        {
          data: this.count,
          backgroundColor:  ["#d6d8d9", "#FF7C80","#f39c12", "#00a65a","#3c8dbc","#d2d6de"]         
        }
      ]
    };

}

Leave a comment