Chart.js en Angular 10

Hola a todos

Muchas veces necesitamos graficar en nuestra aplicación, ya sea por ejemplo, ganancias, gastos, etc.

Para ello podemos utilizar Chart.js, que es una librería de JavaScript realmente muy flexible y con una muy buena ui/ux.

Paso 1: Instalación

npm install chart.js --save

Paso 2: Código en typescript

import {
  Component,
  OnInit,
} from '@angular/core';
import {
  Chart
} from 'chart.js';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  canvas: any;
  ctx: any;

  constructor() {}

  ngOnInit(): void {
   this.setBar();
  }

  setBar() {
    this.canvas = document.getElementById('lineChart');

    this.ctx = this.canvas.getContext('2d');

    const myChart = new Chart(this.ctx, {
      type: 'line',
      data: {
        labels: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'julio'],
        datasets: [{
          label: 'caja',
          data: [100, 120, 120, 130, 120, 115],
          backgroundColor: ['orange'],
          borderWidth: 1
        }]
      },
      options: {
        legend: {
          display: true
        },
        responsive: false,
        display: true
      }
    });
  }
}

Paso 3: Código en html

<canvas id="lineChart"></canvas>

Paso 4: Ejecución

ng serve -o