• Angular, ChartJS
• Développement front-end

Ajout des dépendances avec npm

npm install chart.js --save
npm install ng2-charts --save
                    

Sur le fichier app.module.ts ajouter ce code

import { ChartsModule } from 'ng2-charts';
// In your App's module:
    imports: [
      ChartsModule
    ]
  
                    

Fichier charts.component.html

<div class="col-12 col-sm-12 col-md-7 col-lg-7 col-xl-7">
  <div class="row">
    <div class="container-fluid">
      <div class="card p-4">
        <h5 class="card-title">Chart avec Chart.js</h5>
        <canvas baseChart [datasets]="datasets" [labels]="labels" [options]="options" [chartType]="type">
        </canvas>
      </div>
    </div>
  </div>
</div>
                    

Fichier charts.component.ts

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

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

  public type: ChartType = 'bar';
  public labels: Label[] = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
  public datasets: ChartDataSets[] = [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }];

  public options: ChartOptions = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };


  constructor() { }

  ngOnInit() {
  }

}
                    

• 15-03-2021