Beautiful charts for Angular2 based on Chart.js

Install

---

                         	
npm i ng2-charts --save
							
						

you'll need to install chart.js Dependencies:

                         	
npm install chart.js --save
							
						

Then include these scripts in your angular.json file

                         	
"scripts": [
"./node_modules/chart.js/dist/Chart.bundle.js",
],

							
						

After Installing, include ChartsModule as chartjsModule in your ChartsModule class in chart.module.ts would look like this:

---

                         	
import { ChartsModule as chartjsModule } from 'ng2-charts';

@NgModule({
  imports: [
    ...,
    chartjsModule
  ],
})
export class ChartsModule { }

							
						

ChartjsComponent class in chartjs.component.ts would look like this

---

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

declare const Chart: any;

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

	constructor() { }                    	
  public barChartOptions: any = {
		scaleShowVerticalLines: false,
		responsive: true,
		scales: {
			xAxes: [{
				ticks: {
					fontFamily: "Poppins",
					fontColor: "#9aa0ac", // Font Color

				}
			}],
			yAxes: [{
				ticks: {
					beginAtZero: true,
					fontFamily: "Poppins",
					fontColor: "#9aa0ac", // Font Color
				}
			}]
		}
	};
	public barChartLabels: string[] = ['2001', '2002', '2003', '2004', '2005', '2006', '2007'];
	public barChartType = 'bar';
	public barChartLegend = true;

	public barChartData: any[] = [
		{ data: [58, 60, 74, 78, 55, 64, 42], label: 'Series A' },
		{ data: [30, 45, 51, 22, 79, 35, 82], label: 'Series B' }
	];

	public barChartColors: Array<any> = [
		{

			backgroundColor: 'rgba(109, 144, 232, 0.8)',
			borderColor: 'rgba(109, 144, 232,1)',
			pointBackgroundColor: 'rgba(109, 144, 232,1)',
			pointBorderColor: '#fff',
			pointHoverBackgroundColor: '#fff',
			pointHoverBorderColor: 'rgba(109, 144, 232,0.8)'
		},
		{

			backgroundColor: 'rgba(255, 140, 96, 0.8)',
			borderColor: 'rgba(255, 140, 96,1)',
			pointBackgroundColor: 'rgba(255, 140, 96,1)',
			pointBorderColor: '#fff',
			pointHoverBackgroundColor: '#fff',
			pointHoverBorderColor: 'rgba(255, 140, 96,0.8)'
		},

	];
    }
							
						

chartjs.component.html would look like this

---

                         	
<canvas baseChart class="chart" [datasets]="barChartData" [labels]="barChartLabels"
[options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend"
[chartType]="barChartType"></canvas>
							
						

Type	URL
ng2-charts	https://valor-software.com/ng2-charts/