Angular: 61. Gráficas de estadísticas con Chartjs: Gráfica de pastel

Vamos a ver cómo crear una gráfica de tipo pastel con Angular y Chartjs.


Si volvemos a la página de ng2-charts, nos aparece un menú en el que podemos seleccionar los distintos tipos de gráficas, así que seleccionamos el "Pie Chart":

Como se puede ver, nos aparece una gráfica de ejemplo. Y si nos vamos hacia abajo, nos aparecen los códigos de HTML y de TypeScript que debemos incluir en nuestros ficheros correspondientes del componente:

Así pues, creamos un nuevo componente y copiamos los códigos en los ficheros correspondientes.
Yo los he personalizado un poco para ajustarlo un poco más a mis gustos:

pastelDistribucionCarteraComponent.html:

<div>
  <div>
    <div class="chart">
      <canvas baseChart width="500" height="500"
        [data]="pieChartData"
        [labels]="pieChartLabels"
        [chartType]="pieChartType"
        [options]="pieChartOptions"
        [colors]="pieChartColors"
        [legend]="pieChartLegend">
      </canvas>
    </div>
  </div>
</div>

pastelDistribucionCarteraComponent.ts:

import { Component, OnInit } from '@angular/core';
import { ChartType, ChartOptions } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'app-pastel-distribucion-cartera',
  templateUrl: './pastel-distribucion-cartera.component.html',
  styleUrls: ['./pastel-distribucion-cartera.component.css']
})
export class PastelDistribucionCarteraComponent implements OnInit {

  // Trozos del pastel - Etiquetas
  public pieChartLabels: Label[] = ['IE00B0M62S72 - iShares Euro Dividend UCITS ETF EUR', 'IE00B14X4T88 - iShares Asia Pacific Dividend UCITS ETF USD', 'IE00B0M63177 - iShares MSCI Emerging Markets UCITS ETF', 'IE00B27YCK28 - iShares MSCI EM Latin America UCITS ETF USD'];

  // Trozos del pastel - Cantidades
  public pieChartData: number[] = [13, 23, 50, 8];

  // Trozos del pastel - Colores
  public pieChartColors = [
    {
      backgroundColor: ['rgba(0,0,255,1)', 'rgba(255,0,0,1)', 'rgba(255,255,0,1)', 'rgba(0,255,0,1)'],
    },
  ];

  // Opciones de la gráfica
  public pieChartOptions: ChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    title: {
      text: 'Cartera iShares',
      fontSize: 20,
      fontColor: 'rgba(0,0,0,1)',
      display: true
    },
    legend: {
      position: 'bottom',
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          const label = ctx.chart.data.labels[ctx.dataIndex];
          return label;
        },
        color: '#fff',
      },
    }
  };

  public pieChartType: ChartType = 'pie';
  public pieChartLegend = true;

  constructor() { }

  ngOnInit() {
  }

}

No hay que olvidarse de incluir el componente en el "app.module.ts" y en el "app.routes.ts", como siempre.
Arrancamos la aplicación y viajamos al componente. Nos aparecerá la gráfica con este aspecto:

Y ya tendríamos la gráfica.