import { Component, AfterViewInit } from '@angular/core'; @Component({ templateUrl: './chartjs.component.html' }) export class ChartjsComponent implements AfterViewInit { constructor() {} // This is line chart // bar chart public barChartOptions: any = { scaleShowVerticalLines: false, responsive: true, barThickness: 10 }; public barChartLabels: string[] = [ '2011', '2012', '2013', '2014', '2015', '2016', '2017' ]; public barChartType = 'bar'; public barChartLegend = true; public barChartData: any[] = [ { data: [65, 59, 80, 81, 56, 55, 40], label: 'Iphone 8' }, { data: [28, 48, 40, 19, 86, 27, 90], label: 'Iphone X' } ]; public barChartColors: Array<any> = [ { backgroundColor: '#36bea6' }, { backgroundColor: '#2962FF' } ]; // Doughnut public doughnutChartLabels: string[] = [ 'Download Sales', 'In-Store Sales', 'Mail-Order Sales' ]; public doughnutChartData: number[] = [350, 450, 100]; public doughnutChartType = 'doughnut'; // Radar public radarChartLabels: string[] = [ 'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running' ]; public radarChartData: any = [ { data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A' }, { data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B' } ]; public radarChartType = 'radar'; public radarChartColors: Array<any> = [ { backgroundColor: 'rgba(54,190,166,.5)', borderColor: 'rgba(54,190,166,1)' }, { backgroundColor: 'rgb(41,98,255,.5)', borderColor: 'rgb(41,98,255,1)' } ]; // Pie public pieChartLabels: string[] = [ 'Download Sales', 'In-Store Sales', 'Mail Sales' ]; public pieChartData: number[] = [300, 500, 100]; public pieChartType = 'pie'; // PolarArea public polarAreaChartLabels: string[] = [ 'Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales' ]; public polarAreaChartData: number[] = [300, 500, 100, 40, 120]; public polarAreaLegend = true; public polarAreaChartType = 'polarArea'; // lineChart public lineChartData: Array<any> = [ { data: [65, 39, 80, 15, 76, 35, 40], label: 'Series A' }, { data: [18, 58, 20, 69, 16, 27, 90], label: 'Series B' } ]; public lineChartLabels: Array<any> = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July' ]; public lineChartOptions: any = { responsive: true }; public lineChartColors: Array<any> = [ { // grey backgroundColor: 'rgba(54,190,166,.1)', borderColor: '#36bea6', pointBackgroundColor: '#36bea6', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: '#36bea6' }, { // dark grey backgroundColor: 'rgb(41,98,255,.1)', borderColor: '#2962FF', pointBackgroundColor: '#2962FF', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: '#2962FF' } ]; public lineChartLegend = true; public lineChartType = 'line'; // events public chartClicked(e: any): void { // console.log(e); } public chartHovered(e: any): void { // console.log(e); } public randomize(): void { // Only Change 3 values const data = [ Math.round(Math.random() * 100), 59, 80, Math.random() * 100, 56, Math.random() * 100, 40 ]; const clone = JSON.parse(JSON.stringify(this.barChartData)); clone[0].data = data; this.barChartData = clone; /** * (My guess), for Angular to recognize the change in the dataset * it has to change the dataset variable directly, * so one way around it, is to clone the data, change it and then * assign it; */ } ngAfterViewInit() {} }