import { ChartDataSets, ChartOptions } from 'chart.js'; import { Component, OnInit, Input } from '@angular/core'; import { Label, Color } from 'ng2-charts'; @Component({ selector: 'app-line-chart', templateUrl: './line-chart.component.html', styleUrls: ['./line-chart.component.scss'] }) export class LineChartComponent implements OnInit { @Input() public lineChartData: ChartDataSets; @Input() public lineChartOptions: ChartOptions; @Input() public lineChartTitle: string; @Input() public lineChartLabels: Label[]; @Input() public lineChartColors: Color[] = [ { // light-blue backgroundColor: '#3c8dbc', borderColor: '#3c8dbc', pointBackgroundColor: '#3c8dbc', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: '#3c8dbc' }, { // orange backgroundColor: '#00a65a', borderColor: '#00a65a', pointBackgroundColor: '#00a65a', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: '#00a65a' }, { // red backgroundColor: '#f56954', borderColor: '#f56954', pointBackgroundColor: '#f56954', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: '#f56954' } ]; @Input() public lineChartLegend = true; @Input() public lineChartType = 'line'; @Input() public lineChartPlugins = []; constructor() { } ngOnInit() { } }