Events in Angular Heatmap chart component
This section describes the HeatMap chart event, which occurs when the required actions are performed.
cellClick
When you click on a HeatMap cell, the cellClick event is triggered. To know more about arguments of this event, refer here.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'
import { TooltipService, LegendService} from '@syncfusion/ej2-angular-heatmap'
import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Tooltip, Legend, ICellClickEventArgs } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Tooltip, Legend);
@Component({
imports: [
HeatMapModule
],
providers: [TooltipService, LegendService],
standalone: true,
selector: 'my-app',
template:
`<ejs-heatmap id='container' (cellClick)=(cellClick($event)) style="display:block;" [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'
[titleSettings]='titleSettings'>
</ejs-heatmap>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public cellClick(args: ICellClickEventArgs): void {
console.log("The cell click event has been triggered!!!");
}
public dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
public titleSettings: Object = {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
};
public xAxis: Object = {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
public yAxis: Object = {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));cellDoubleClick
When you double click on a HeatMap cell, the cellDoubleClick event is triggered. To know more about arguments of this event, refer here.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'
import { TooltipService, LegendService} from '@syncfusion/ej2-angular-heatmap'
import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Tooltip, Legend, ICellClickEventArgs } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Tooltip, Legend);
@Component({
imports: [
HeatMapModule
],
providers: [TooltipService, LegendService],
standalone: true,
selector: 'my-app',
template:
`<ejs-heatmap id='container' (cellDoubleClick)=(cellDoubleClick($event)) style="display:block;" [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'
[titleSettings]='titleSettings'>
</ejs-heatmap>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public cellDoubleClick(args: ICellClickEventArgs): void {
console.log("The cell double click event has been triggered!!!");
}
public dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
public titleSettings: Object = {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
};
public xAxis: Object = {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
public yAxis: Object = {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));cellRender
The cellRender event will be triggered before each HeatMap cell is rendered. To know more about arguments of this event, refer here.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'
import { TooltipService, LegendService} from '@syncfusion/ej2-angular-heatmap'
import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Tooltip, Legend, ICellEventArgs } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Tooltip, Legend);
@Component({
imports: [
HeatMapModule
],
providers: [TooltipService, LegendService],
standalone: true,
selector: 'my-app',
template:
`<ejs-heatmap id='container' (cellRender)=(cellRender($event)) style="display:block;" [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'
[titleSettings]='titleSettings'>
</ejs-heatmap>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public cellRender(args: ICellEventArgs): void {
console.log("The cell render event has been triggered!!!");
}
public dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
public titleSettings: Object = {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
};
public xAxis: Object = {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
public yAxis: Object = {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));cellSelected
When single or multiple cells in the HeatMap are selected, the cellSelected event is triggered. To know more about arguments of this event, refer here.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'
import { TooltipService, LegendService} from '@syncfusion/ej2-angular-heatmap'
import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Tooltip, Legend, ISelectedEventArgs } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Tooltip, Legend);
@Component({
imports: [
HeatMapModule
],
providers: [TooltipService, LegendService],
standalone: true,
selector: 'my-app',
template:
`<ejs-heatmap id='container' (cellSelected)=(cellSelected($event)) style="display:block;" [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'
[titleSettings]='titleSettings' [allowSelection]='allowSelection'>
</ejs-heatmap>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public cellSelected(args: ISelectedEventArgs): void {
console.log("The cell selected event has been triggered!!!");
}
public allowSelection: boolean = true;
public dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
public titleSettings: Object = {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
};
public xAxis: Object = {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
public yAxis: Object = {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));created
Once HeatMap has been completely rendered, the created event is triggered.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'
import { TooltipService, LegendService} from '@syncfusion/ej2-angular-heatmap'
import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Tooltip, Legend } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Tooltip, Legend);
@Component({
imports: [
HeatMapModule
],
providers: [TooltipService, LegendService],
standalone: true,
selector: 'my-app',
template:
`<ejs-heatmap id='container' (created)=(created($event)) style="display:block;" [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'
[titleSettings]='titleSettings'>
</ejs-heatmap>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public created(args: Object): void {
console.log("The created event has been triggered!!!");
}
public dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
public titleSettings: Object = {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
};
public xAxis: Object = {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
public yAxis: Object = {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));legendRender
The legendRender event is triggered before the legend is rendered. To know more about arguments of this event, refer here.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'
import { TooltipService, LegendService} from '@syncfusion/ej2-angular-heatmap'
import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Tooltip, Legend, ILegendRenderEventArgs } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Tooltip, Legend);
@Component({
imports: [
HeatMapModule
],
providers: [TooltipService, LegendService],
standalone: true,
selector: 'my-app',
template:
`<ejs-heatmap id='container' (legendRender)=(legendRender($event)) style="display:block;" [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'
[titleSettings]='titleSettings'>
</ejs-heatmap>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public legendRender(args: ILegendRenderEventArgs): void {
console.log("The legend render event has been triggered!!!");
}
public dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
public titleSettings: Object = {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
};
public xAxis: Object = {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
public yAxis: Object = {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));load
The load event is triggered before the HeatMap is rendered. To know more about arguments of this event, refer here.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'
import { TooltipService, LegendService } from '@syncfusion/ej2-angular-heatmap'
import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Tooltip, Legend, ILoadedEventArgs } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Tooltip, Legend);
@Component({
imports: [
HeatMapModule
],
providers: [TooltipService, LegendService],
standalone: true,
selector: 'my-app',
template:
`<ejs-heatmap id='container' (load)=(load($event)) style="display:block;" [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'
[titleSettings]='titleSettings'>
</ejs-heatmap>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public load(args: ILoadedEventArgs): void {
console.log("The load event has been triggered!!!");
}
public dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
public titleSettings: Object = {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
};
public xAxis: Object = {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
public yAxis: Object = {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));loaded
Once HeatMap is loaded, the loaded event is triggered. To know more about arguments of this event, refer here.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'
import { TooltipService, LegendService} from '@syncfusion/ej2-angular-heatmap'
import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Tooltip, Legend, ILoadedEventArgs } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Tooltip, Legend);
@Component({
imports: [
HeatMapModule
],
providers: [TooltipService, LegendService],
standalone: true,
selector: 'my-app',
template:
`<ejs-heatmap id='container' (loaded)=(loaded($event)) style="display:block;" [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'
[titleSettings]='titleSettings'>
</ejs-heatmap>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public loaded(args: ILoadedEventArgs): void {
console.log("The loaded event has been triggered!!!");
}
public dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
public titleSettings: Object = {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
};
public xAxis: Object = {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
public yAxis: Object = {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));resized
When the window is resized, the resized event is triggered to notify the resize of the HeatMap. To know more about arguments of this event, refer here.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'
import { TooltipService, LegendService} from '@syncfusion/ej2-angular-heatmap'
import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Tooltip, Legend, IResizeEventArgs } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Tooltip, Legend);
@Component({
imports: [
HeatMapModule
],
providers: [TooltipService, LegendService],
standalone: true,
selector: 'my-app',
template:
`<ejs-heatmap id='container' (resized)=(resized($event)) style="display:block;" [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'
[titleSettings]='titleSettings'>
</ejs-heatmap>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public resized(args: IResizeEventArgs): void {
console.log("The resized event has been triggered!!!");
}
public dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
public titleSettings: Object = {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
};
public xAxis: Object = {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
public yAxis: Object = {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));tooltipRender
The tooltipRender event is triggered before the tooltip is rendered on the HeatMap cell. To know more about arguments of this event, refer here.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'
import { TooltipService, LegendService} from '@syncfusion/ej2-angular-heatmap'
import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMap, Tooltip, Legend, ITooltipEventArgs } from '@syncfusion/ej2-angular-heatmap';
HeatMap.Inject(Tooltip, Legend);
@Component({
imports: [
HeatMapModule
],
providers: [TooltipService, LegendService],
standalone: true,
selector: 'my-app',
template:
`<ejs-heatmap id='container' (tooltipRender)=(tooltipRender($event)) style="display:block;" [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'
[titleSettings]='titleSettings'>
</ejs-heatmap>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public tooltipRender(args: ITooltipEventArgs): void {
console.log("The tooltip render event has been triggered!!!");
}
public dataSource: Object[] = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
public titleSettings: Object = {
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
};
public xAxis: Object = {
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
public yAxis: Object = {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));