ems-frontend/src/app/utils/line-chart/line-chart.component.ts

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() {
  }

}