1: Installez Bootstrap pour gérer la mise en page de l'application de

graphique:

npm install bootstrap

2: installez ng2-charts et les bibliothèques Chart Js via npm dans le

projet Angular :

npm i ng2-charts@1.6.0 and npm i chart.js@2.7.3

3: importez ChartsModule dans le fichier app.module.ts :

import { ChartsModule } from 'ng2-charts';

@NgModule({
declarations: [...],
imports: [
ChartsModule
],
providers: [...],
bootstrap: [...]
})

export class AppModule { }

chart.ts

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

import { DaattaService } from 'src/app/service/daatta.service';

export class Data {

teamOne: string;
teamTwo: string;
 scoreOne: string;
scoreTwo: string;
}
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: [ './chart.component.css' ]
})
export class ChartComponent implements OnInit {
public barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
xAxes: [
{
stacked: true
}
],
yAxes: [
{
stacked: true
}
]
}
};
public barChartLabels: string[];
public barChartType: string = 'bar';
public barChartLegend: boolean = true;

public barChartData: any[] = [ { data: [], label: 'Volume Sales' },

{ data: [], label: 'Value Sales' } ];

constructor(private _emp: DaattaService) {}

ngOnInit() {
this._emp.getSales().subscribe((data) => {
this.barChartLabels = Object.keys(data);
this.barChartLabels.forEach((label) => {

this.barChartData[0].data.push(data[label]['volumeSales']);

this.barChartData[1].data.push(data[label]['valueSales']);
});
 });
}
}

chart.html
<div>
<div class="chart">
<canvas baseChart [datasets]="barChartData"
[labels]="barChartLabels" [options]="barChartOptions"
[legend]="barChartLegend" [chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>

service .ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { of } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class DaattaService {
matchUrl = 'http://localhost:3000/matches';
constructor(private httpClient: HttpClient) {}
// getAllMatches() {
// // Action :Get , Address: api/matches
// this.httpClient.get<{ matches: any }>(this.matchUrl);
// }
getSales() {
return of({
year1: {
volumeSales: '1.09',
valueSales: '1.23'
},
year2: {
volumeSales: '0.11',
valueSales: '1.56'
},
 year3: {
volumeSales: '0.12',
valueSales: '1.69'
},
year4: {
volumeSales: '0.12',
valueSales: '1.64'
},
year5: {
volumeSales: '0.10',
valueSales: '1.41'
},
year6: {
volumeSales: '0.10',
valueSales: '1.41'
},
year7: {
volumeSales: '0.10',
valueSales: '1.41'
},
year8: {
volumeSales: '0.10',
valueSales: '1.41'
},
year9: {
volumeSales: '0.10',
valueSales: '1.41'
},
year10: {
volumeSales: '0.10',
valueSales: '1.41'
},
year11: {
volumeSales: '0.10',
valueSales: '1.41'
},
total: {
volumeSales: '0.55',
valueSales: '0.53'
}
});
}
}