Angular: 62. Gráficas de estadísticas con Chartjs: Gráfica de barras

Vamos a ver cómo pintar un gráfico de barras.



Exactamente igual que con el gráfico de pastel. Nos vamos a la web de ng2-charts y seleccionamos "Bar Char:

A continuación, creamos un nuevo componente, lo incluímos en el "app.module.ts" y en el fichero de rutas. Copiamos los códigos HTML y TypeScript de la web de ng2-charts en los ficheros de nuestro componente:

barrasDividendoAnualComponent.html:

<div>
  <div>
    <div style="display: block">
      <canvas baseChart
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
    [colors]="barChartColors"
        [legend]="barChartLegend"
        [chartType]="barChartType">
      </canvas>
    </div>
  </div>
</div>

barrasDividendoAnualComponent.ts:

import { Component, OnInit } from '@angular/core';

import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';

import { Label, Color } from 'ng2-charts';

@Component({

  selector: 'app-barras-dividendo-anual',

  templateUrl: './barras-dividendo-anual.component.html',

  styleUrls: ['./barras-dividendo-anual.component.css']

})

export class BarrasDividendoAnualComponent implements OnInit {

  // Barras

  public barChartData: ChartDataSets[] = [

    { data: [5, 10], label: 'IE00B0M62S72 - iShares Euro Dividend UCITS ETF EUR' },

    { data: [20, 40], label: 'IE00B14X4T88 - iShares Asia Pacific Dividend UCITS ETF USD' },

    { data: [9, 4], label: 'IE00B0M63177 - iShares MSCI Emerging Markets UCITS ETF' },

    { data: [15, 10], label: 'IE00B27YCK28 - iShares MSCI EM Latin America UCITS ETF USD' }

  ];

  // Eje X

  public barChartLabels: Label[] = ['2019', '2020'];

  // Opciones de la gráfica

  public barChartOptions: ChartOptions = {

    responsive: true,

    // maintainAspectRatio: false,

    // We use these empty structures as placeholders for dynamic theming.

    scales: { xAxes: [{}], yAxes: [{}] },

    title: {

      text: 'Dividendo Anual',

      fontSize: 20,

      fontColor: 'rgba(0,0,0,1)',

      display: true

    },

    legend: {

      position: 'bottom',

    },

    plugins: {

      datalabels: {

        anchor: 'end',

        align: 'end',

      }

    }

  };

  // Colores de las barras

  public barChartColors: Color[] = [

    { // Euro - Azul

      backgroundColor: 'rgba(0,0,255,1)',

      borderColor: 'rgba(0,0,255,1)',

      hoverBackgroundColor: 'rgba(0,0,255,1)',

      hoverBorderColor: 'rgba(0,0,255,1)'

    },

    { // Asia - Rojo

      backgroundColor: 'rgba(255,0,0,1)',

      borderColor: 'rgba(255,0,0,1)',

      hoverBackgroundColor: 'rgba(255,0,0,1)',

      hoverBorderColor: 'rgba(255,0,0,1)'

    },

    { // Emerging Markets - Amarillo

      backgroundColor: 'rgba(255,255,0,1)',

      borderColor: 'rgba(255,255,0,1)',

      hoverBackgroundColor: 'rgba(255,255,0,1)',

      hoverBorderColor: 'rgba(255,255,0,1)'

    },

    { // Latin America - Verde

      backgroundColor: 'rgba(0,255,0,1)',

      borderColor: 'rgba(0,255,0,1)',

      hoverBackgroundColor: 'rgba(0,255,0,1)',

      hoverBorderColor: 'rgba(0,255,0,1)'

    }

  ];

  public barChartType: ChartType = 'bar';

  public barChartLegend = true;

  constructor() { }

  ngOnInit() {

  }

}

Y arrancamos la aplicación. Viajamos al componente y podremos ver una gráfica como ésta:

Y con ésto tenemos terminada la gráfica.