Support-pie-chartjs-pld NPM

Project Support Pie Chart

Creation of plugin to be able to alter the configurations of the library js chart

Prerequisites

You need to have the Chartjs library installed (https://www.chartjs.org/docs/latest/getting-started/installation.html)

npm install chart.js --save

Installing

To be able to install the plugin you have to install the following library

npm install support-pie-chartjs-pld --save

How to use?

Step 1

You have to import with the following code

// Import
import { Component } from '@angular/core';
import * as Chart from 'chart.js'
import "support-pie-chartjs-pld";

Step 2

Insert new configuration inside the graph configuration - Pie Chart

ngAfterViewInit() {
    this.canvas = document.getElementById('myChart');
    this.ctx = this.canvas.getContext('2d');
    let myChart = new Chart(this.ctx, {
      type: 'pie',
      data: {
          labels: ["New", "In Progress", "On Hold"],
          datasets: [{
              label: '# of Votes',
              data: [1,2,3],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
        responsive: true,
        display:true,
        cutoutPercentage: 85,
        elements: {  //New Configuration
          center: {
            text: '6',   // Text Center
            color: "#252220",  // Color Label
            fontStyle: 'Arial',  // Font Label
            sidePadding: 20,  // Padding Label
            minFontSize: 25, // Size Label
            lineHeight: 25 // Height Label
          }
        },
      }
    });
  }