Install ng2-charts using npm

ng2-charts

npm install ng2-charts --save

No Dependencies for this module.

Add ChartsModule into your ChartsNg2Module class. charts.module.ts would look like this

import {NgModule} from '@angular/core';
import { ChartsModule } from 'ng2-charts';
import { ChartjsComponent } from "./chartjs/chartjs.component";

@NgModule({
imports: [ChartsModule],
declarations: [ChartjsComponent],
providers: [ ],
})
export class ChartsNg2Module {

}
            

import chartjs data file from shared folder in ChartjsComponent class. chartjs.component.ts would look like this

import { Component } from '@angular/core';
import * as chartsData from '../../shared/data/chartjs';

@Component({
    selector: 'app-chartjs',
    templateUrl: './chartjs.component.html'
})

export class ChartjsComponent {

    // lineChart
    public lineChartData = chartsData.lineChartData;
    public lineChartLabels = chartsData.lineChartLabels;
    public lineChartOptions = chartsData.lineChartOptions;
    public lineChartColors = chartsData.lineChartColors;
    public lineChartLegend = chartsData.lineChartLegend;
    public lineChartType = chartsData.lineChartType;

    // events
    public chartClicked(e: any): void {
        console.log(e);
    }

    public chartHovered(e: any): void {
        console.log(e);
    }

}
            

chartjs.component.html would look like this

<canvas id="bar-line1"  height="400" baseChart class="chart" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColors"
[legend]="lineChartLegend" [chartType]="lineChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)" > </canvas>
                    

export var lineChartData: Array = [

    { data: [28, 48, 50, 70, 40, 20, 30], label: 'Series A' },
    { data: [18, 48, 77, 9, 100, 27, 40], label: 'Series B' }

];
export var lineChartLabels: Array = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
export var lineChartOptions: any = {
    animation: false,
    responsive: true,
    maintainAspectRatio: false
};
export var lineChartColors: Array = [


    {

    backgroundColor: 'rgba(255, 141, 96, 0.8)',
    borderColor: 'rgba(148,159,177,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    {

    backgroundColor: 'rgba(0, 157, 160, 0.8)',
    borderColor: 'rgba(148,159,177,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },

];
export var lineChartLegend = true;
export var lineChartType = 'line';