Chart Event in Angular Chart Component
18 Nov 201824 minutes to read
Chart events are callback functions that the Syncfusion EJ2 Chart component triggers at different stages of its life cycle. They allow developers to respond to user interactions, customize rendering, control behavior, and extend chart functionality without modifying the core control. These events enable developers to implement custom logic, enhance interactivity, and tailor the chart’s behavior to specific requirements, thereby providing a more dynamic and responsive user experience.
Animation
animationComplete
After a series animation has completed, the animationComplete event will be triggered. To know more about the arguments of this event, refer here.
import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import {
CategoryService,
LegendService,
DataLabelService,
LineSeriesService,
IAnimationCompleteEventArgs,
} from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
@Component({
imports: [ChartModule, ChartAllModule],
providers: [
CategoryService,
LegendService,
DataLabelService,
LineSeriesService,
],
standalone: true,
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [legendSettings]='legendSettings' [title]='title' (animationComplete)="onAnimationComplete($event)">
<e-series-collection>
<e-series [dataSource]='chartData' type='Line' xName='month' yName='sales' name='Sales' [marker]='marker' [animation]="animation"></e-series>
</e-series-collection>
</ejs-chart>`,
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public primaryYAxis?: Object;
public legendSettings?: Object;
public marker?: Object;
public animation?: Object;
public title?: string;
ngOnInit(): void {
// Data label for chart series
this.marker = {
dataLabel: {
visible: true,
},
};
this.animation = {
enable: true,
duration: 1000, // ms
delay: 0,
};
this.chartData = [
{ month: 'Jan', sales: 35 },
{ month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 },
{ month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 },
{ month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 },
{ month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 },
{ month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 },
{ month: 'Dec', sales: 32 },
];
this.primaryXAxis = {
valueType: 'Category',
};
this.primaryYAxis = {
labelFormat: '${value}K',
};
this.legendSettings = {
visible: true,
};
this.title = 'Sales Analysis';
}
// Trigger when series animation finishes rendering
public onAnimationComplete(args: IAnimationCompleteEventArgs): void {
console.log('Chart animation complete event was triggered');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Labels and Axes
axisLabelRender
Before an axis label is rendered, the axisLabelRender event will be triggered to customize label text and style. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
IAxisLabelRenderEventArgs
} from '@syncfusion/ej2-angular-charts';
import {
CategoryService,
LegendService,
DataLabelService,
LineSeriesService
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LegendService, DataLabelService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[legendSettings]="legendSettings"
[title]="title"
(axisLabelRender)="onAxisLabelRender($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales"
[marker]="marker">
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public primaryYAxis?: Object;
public legendSettings?: Object;
public marker?: Object;
public title?: string;
ngOnInit(): void {
// Data label for chart series
this.marker = {
dataLabel: {
visible: true
}
};
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = {
valueType: 'Category'
};
this.primaryYAxis = {
labelFormat: '${value}K'
};
this.legendSettings = { visible: true };
this.title = 'Sales Analysis';
}
// Axis label render handler
public onAxisLabelRender(args: IAxisLabelRenderEventArgs): void {
console.log("Chart axis label render event was triggered");
// Example 1: Uppercase category X-axis labels
if (args.axis.valueType === 'Category' && typeof args.text === 'string') {
// Hide a specific label (e.g., 'Aug')
if (args.text === 'Aug') {
args.cancel = true;
return;
}
args.text = args.text.toUpperCase();
}
// Example 2: Custom format for Y-axis numeric labels
if (args.axis.valueType !== 'Category' && typeof args.value === 'number') {
// Format as currency with 'K' suffix
args.text = `$${args.value}K`;
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));axisLabelClick
The axisLabelClick event will be triggered when an axis label is clicked. To know more about the arguments of this event, refer here.
import { ChartModule, IAxisLabelClickEventArgs } from '@syncfusion/ej2-angular-charts'
import { CategoryService, LegendService, DataLabelService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
ChartModule
],
providers: [ CategoryService, LegendService, DataLabelService, LineSeriesService ],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id='chart-container'
[primaryXAxis]='primaryXAxis'
[primaryYAxis]='primaryYAxis'
[legendSettings]='legendSettings'
[title]='title'
(axisLabelClick)='onAxisLabelClick($event)'
>
<e-series-collection>
<e-series
[dataSource]='chartData'
type='Line'
xName='month'
yName='sales'
name='Sales'
[marker]='marker'>
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public primaryYAxis?: Object;
public legendSettings?: Object;
public marker?: Object;
public title?: string;
ngOnInit(): void {
// Data label for chart series
this.marker = {
dataLabel: {
visible: true
}
};
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = {
valueType: 'Category'
};
this.primaryYAxis = {
labelFormat: '${value}K'
};
this.legendSettings = {
visible: true
};
this.title = 'Sales Analysis';
}
// Axis label click handler
public onAxisLabelClick(args: IAxisLabelClickEventArgs): void {
console.log('Chart axis label click event was triggered');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));axisRangeCalculated
After an axis range (minimum, maximum, interval) is calculated, the axisRangeCalculated event will be triggered, allowing you to override the values. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
IAxisRangeCalculatedEventArgs,
CategoryService,
BarSeriesService,
ColumnSeriesService,
LineSeriesService,
LegendService,
DataLabelService,
MultiLevelLabelService,
SelectionService
} from '@syncfusion/ej2-angular-charts';
// import { categoryData } from './datasource';
@Component({
imports: [ChartModule],
providers: [
CategoryService,
BarSeriesService,
ColumnSeriesService,
LineSeriesService,
LegendService,
DataLabelService,
MultiLevelLabelService,
SelectionService
],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(axisRangeCalculated)="onAxisRangeCalculated($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Column"
xName="country"
yName="gold"
name="Gold">
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: any;
public primaryYAxis?: any;
public chartData?: Object[];
public title?: string;
ngOnInit(): void {
this.chartData = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];
// Keep X axis as Category; let the event adjust min/max/interval
this.primaryXAxis = {
valueType: 'Category',
title: 'Countries'
};
// Basic Y axis; event will add padding and adjust interval
this.primaryYAxis = {
title: 'Gold Medals'
};
this.title = 'Olympic Medals';
}
// axisRangeCalculated: modify the computed min/max/interval for axes
public onAxisRangeCalculated(args: IAxisRangeCalculatedEventArgs): void {
console.log('Axis range calculated event was triggered');
if (args.axis.valueType === 'Category' && args.axis.name === 'primaryXAxis') {
args.minimum = 1;
args.maximum = 5;
args.interval = 2;
return;
}
// For Y axis (numeric), add 10% headroom and compute a clean interval
if (args.axis.orientation === 'Vertical') {
const currentMin = Number(args.minimum ?? 0);
const currentMax = Number(args.maximum ?? 0);
const range = Math.max(0, currentMax - currentMin);
const pad = range * 0.1; // 10% headroom
// Ensure baseline at 0 and padded max rounded to a nice step
const newMin = 0;
const newMax = Math.ceil((currentMax + pad) / 5) * 5;
args.minimum = newMin;
args.maximum = newMax;
// Choose about 5 ticks
const approxTicks = 5;
const rawInterval = (newMax - newMin) / approxTicks || 1;
// Snap interval to 1/2/5 multiples for readability
const snap = (val: number) => {
const pow = Math.pow(10, Math.floor(Math.log10(val)));
const norm = val / pow;
let m = 1;
if (norm > 5) m = 10;
else if (norm > 2) m = 5;
else if (norm > 1) m = 2;
return m * pow;
};
args.interval = snap(rawInterval);
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));axisMultiLabelRender
Before multi-level axis labels are rendered, the axisMultiLabelRender event will be triggered to customize label text and style. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
IAxisMultiLabelRenderEventArgs,
CategoryService,
BarSeriesService,
ColumnSeriesService,
LineSeriesService,
LegendService,
DataLabelService,
MultiLevelLabelService,
SelectionService
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [
CategoryService,
BarSeriesService,
ColumnSeriesService,
LineSeriesService,
LegendService,
DataLabelService,
MultiLevelLabelService,
SelectionService
],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
[legendSettings]="legendSettings"
(axisMultiLabelRender)="onAxisMultiLabelRender($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Column"
xName="country"
yName="gold"
name="Gold">
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: any;
public primaryYAxis: any;
public chartData?: Object[];
public title?: string;
public legendSettings: Object = { visible: false };
ngOnInit(): void {
this.chartData = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];;
this.primaryXAxis = {
valueType: 'Category',
// Multi-level labels: two groups by index range
multiLevelLabels: [
{
categories: [
// Start and end accept number, date, or string values
{ start: -0.5, end: 3.5, text: 'Half Yearly 1' },
{ start: 3.5, end: 7.5, text: 'Half Yearly 2' }
],
border: { type: 'Rectangle', color: '#BDBDBD', width: 1 },
alignment: 'Center'
}
]
};
this.primaryYAxis = {
title: 'Gold Medals'
};
this.title = 'Olympic Medals';
}
// axisMultiLabelRender: customize or cancel multi-level labels at render time
public onAxisMultiLabelRender(args: IAxisMultiLabelRenderEventArgs): void {
console.log("Axis MultiLabel Render Event was triggered");
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));multiLevelLabelClick
The multiLevelLabelClick event will be triggered when a multi-level axis label segment is clicked. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
IAxisMultiLabelRenderEventArgs,
CategoryService,
BarSeriesService,
ColumnSeriesService,
LineSeriesService,
LegendService,
DataLabelService,
MultiLevelLabelService,
SelectionService, IMultiLevelLabelClickEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [
CategoryService,
BarSeriesService,
ColumnSeriesService,
LineSeriesService,
LegendService,
DataLabelService,
MultiLevelLabelService,
SelectionService
],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
[legendSettings]="legendSettings"
(multiLevelLabelClick)="onMultiLevelLabelClick($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Column"
xName="country"
yName="gold"
name="Gold">
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: any;
public primaryYAxis: any;
public chartData?: Object[];
public title?: string;
public legendSettings: Object = { visible: false };
ngOnInit(): void {
this.chartData = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];;
this.primaryXAxis = {
valueType: 'Category',
// Multi-level labels: two groups by index range
multiLevelLabels: [
{
categories: [
// Start and end accept number, date, or string values
{ start: -0.5, end: 3.5, text: 'Half Yearly 1' },
{ start: 3.5, end: 7.5, text: 'Half Yearly 2' }
],
border: { type: 'Rectangle', color: '#BDBDBD', width: 1 },
alignment: 'Center'
}
]
};
this.primaryYAxis = {
title: 'Gold Medals'
};
this.title = 'Olympic Medals';
}
// multiLevelLabelClick: event when a multi-level label segment is clicked
public onMultiLevelLabelClick(args: IMultiLevelLabelClickEventArgs): void {
console.log('MultiLevel label click event was triggered');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Series and Points
seriesRender
Before a series is rendered, the seriesRender event will be triggered to customize series appearance and properties. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import { ChartModule, CategoryService, ColumnSeriesService, LegendService, SelectionService, ISeriesRenderEventArgs } from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, ColumnSeriesService, LegendService, SelectionService],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
selectionMode="Point"
(seriesRender)="onSeriesRender($event)"
>
<e-series-collection>
<e-series [dataSource]="chartData" type="Column" xName="country" yName="gold" name="Gold"></e-series>
<e-series [dataSource]="chartData" type="Column" xName="country" yName="silver" name="Silver"></e-series>
<e-series [dataSource]="chartData" type="Column" xName="country" yName="bronze" name="Bronze"></e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public chartData?: Object[];
public title?: string;
ngOnInit(): void {
this.chartData = [
{ country: 'USA', gold: 50, silver: 70, bronze: 45 },
{ country: 'China', gold: 40, silver: 60, bronze: 55 },
{ country: 'Japan', gold: 70, silver: 60, bronze: 50 },
{ country: 'Australia', gold: 60, silver: 56, bronze: 40 },
{ country: 'France', gold: 50, silver: 45, bronze: 35 },
{ country: 'Germany', gold: 40, silver: 30, bronze: 22 },
{ country: 'Italy', gold: 40, silver: 35, bronze: 37 },
{ country: 'Sweden', gold: 30, silver: 25, bronze: 27 }
];
this.primaryXAxis = {
valueType: 'Category',
title: 'Countries'
};
this.primaryYAxis = {
title: 'Medals'
};
this.title = 'Olympic Medals';
}
// seriesRender is deprecated, but this shows how to customize series before render
public onSeriesRender(args: ISeriesRenderEventArgs): void {
console.log('Series render event was triggered');
const palette = ['#f9c74f', '#90be6d', '#577590'];
args.series.fill = palette[args.series.index] || '#7f8c8d';
args.series.opacity = 0.9;
args.series.border = { width: 1, color: '#ffffff' };
args.series.columnWidth = 0.6;
(args.series as any).cornerRadius = { topLeft: 6, topRight: 6 };
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));pointClick
The pointClick event will be triggered when a data point or its symbol is clicked. Use this event to perform actions such as highlighting, drilling down, or showing custom details for the selected point. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
ColumnSeriesService,
ILoadedEventArgs,
IPointEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, ColumnSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(pointClick)="onPointClick($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Column"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// pointClick: handle point click actions
public onPointClick(args: IPointEventArgs): void {
console.log('Point click event was triggered');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));pointDoubleClick
The pointDoubleClick event will be triggered when a data point or its symbol is double-clicked. Use this event for quick-edit workflows, navigation, or toggling detailed views for the target point. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
ColumnSeriesService,
ILoadedEventArgs,
IPointEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, ColumnSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(pointDoubleClick)="onPointDoubleClick($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Column"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// pointRender: customize each point's appearance before rendering
public onPointDoubleClick(args: IPointEventArgs): void {
console.log("Point Double Click event was triggered");
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));pointMove
The pointMove event will be triggered when the pointer moves over a data point. Use this event to show contextual UI, update external indicators, or track the hovered point dynamically. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
ColumnSeriesService,
ILoadedEventArgs,
IPointEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, ColumnSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(pointMove)="onPointMove($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Column"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// pointRender: customize each point's appearance before rendering
public onPointMove(args: IPointEventArgs): void {
console.log("Point Move event was triggered");
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));pointRender
Before an individual data point is rendered, the pointRender event will be triggered to customize its visual (color, border, shape, size, corner radius). To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
ColumnSeriesService,
ILoadedEventArgs,
IPointRenderEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, ColumnSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(pointRender)="onPointRender($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Column"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// pointRender: customize each point's appearance before rendering
public onPointRender(args: IPointRenderEventArgs): void {
console.log('Point render event was triggered');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));textRender (Data Labels)
Before a data label is rendered, the textRender event will be triggered to customize label text, style, template, or position. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
IAxisLabelRenderEventArgs,
ITextRenderEventArgs
} from '@syncfusion/ej2-angular-charts';
import {
CategoryService,
LegendService,
DataLabelService,
LineSeriesService
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LegendService, DataLabelService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[legendSettings]="legendSettings"
[title]="title"
(axisLabelRender)="onAxisLabelRender($event)"
(textRender)="onTextRender($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales"
[marker]="marker">
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: { month: string; sales: number }[];
public primaryYAxis?: Object;
public legendSettings?: Object;
public marker?: Object;
public title?: string;
ngOnInit(): void {
// Enable data labels for the series
this.marker = {
visible: true,
dataLabel: {
visible: true
}
};
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category' };
this.primaryYAxis = { labelFormat: '${value}K' };
this.legendSettings = { visible: true };
this.title = 'Sales Analysis';
}
// Axis label render handler (kept from your sample)
public onAxisLabelRender(args: IAxisLabelRenderEventArgs): void {
if (args.axis.valueType === 'Category' && typeof args.text === 'string') {
if (args.text === 'Aug') {
args.cancel = true; // hide a specific X-axis label
return;
}
args.text = args.text.toUpperCase();
}
if (args.axis.valueType !== 'Category' && typeof args.value === 'number') {
args.text = `$${args.value}K`;
}
}
// textRender handler: customize data labels before they are rendered
public onTextRender(args: ITextRenderEventArgs): void {
console.log("text render event triggered");
// Example 1: Format label text as currency with K suffix
if (typeof args.point?.y === 'number') {
args.text = `$${args.point.y}K`;
}
// Example 2: Highlight a particular month’s label (e.g., 'Aug')
if (args.point?.x === 'Aug') {
args.text = `${args.text} ★`;
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));dragStart
Triggered when a data point drag operation begins on a series with dragging enabled (via dragSettings). Use this event to validate the drag action, apply constraints, or cancel the drag before it proceeds. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
DataEditingService,
ZoomService,
IDataEditingEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
standalone: true,
selector: 'app-container',
imports: [ChartModule],
providers: [CategoryService, LineSeriesService, DataEditingService, ZoomService],
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(dragStart)="onDragStart($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales"
[dragSettings]="dragSettings">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
public dragSettings = { enable: true, type: 'Y' }; // drag along Y only
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales (Drag a point to edit)';
}
// Fires when user starts dragging a data point
onDragStart(args: IDataEditingEventArgs): void {
// Inspect available details
console.log('dragStart event was triggered');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));drag
Triggered continuously while a data point is being dragged. Use this event to provide live feedback, enforce boundaries, or update UI as the point’s position changes. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
DataEditingService,
ZoomService,
IDataEditingEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
standalone: true,
selector: 'app-container',
imports: [ChartModule],
providers: [CategoryService, LineSeriesService, DataEditingService, ZoomService],
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(drag)="onDrag($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales"
[dragSettings]="dragSettings">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
public dragSettings = { enable: true, type: 'Y' }; // drag along Y only
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales (Drag a point to edit)';
}
// Fires while a point is being dragged (continuous)
public onDrag(args: IDataEditingEventArgs): void {
console.log('Drag event was triggered');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));dragEnd
Triggered when a data point drag operation is completed (pointer released) and the new value is committed. Use this event to persist changes, refresh related UI, or perform post-edit actions. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
DataEditingService,
ZoomService,
IDataEditingEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
standalone: true,
selector: 'app-container',
imports: [ChartModule],
providers: [CategoryService, LineSeriesService, DataEditingService, ZoomService],
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(dragEnd)="onDragEnd($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales"
[dragSettings]="dragSettings">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
public dragSettings = { enable: true, type: 'Y' }; // drag along Y only
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales (Drag a point to edit)';
}
// Fires when the drag operation completes and the final value is committed
public onDragEnd(args: IDataEditingEventArgs): void {
// Persist or process the final value here
console.log('Drag end event was triggered');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Tooltip
tooltipRender
Before a tooltip for a single series point is shown, the tooltipRender event will be triggered to customize content and style. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
TooltipService,
ITooltipRenderEventArgs,
TooltipSettingsModel,
IMouseEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LineSeriesService, TooltipService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
[tooltip]="tooltip"
(tooltipRender)="onTooltipRender($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
public tooltip?: TooltipSettingsModel;
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
// Enable tooltip; event will customize the content/style
this.tooltip = {
enable: true,
enableAnimation: true,
shared: false
};
}
// Customize tooltip before it renders
public onTooltipRender(args: ITooltipRenderEventArgs): void {
console.log("Tooltip render event was triggered")
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));sharedTooltipRender
Before a shared tooltip is shown (multiple series at the same x-value), the sharedTooltipRender event will be triggered to customize aggregated content. To know more about the arguments of this event, refer here.
import {
ChartModule,
DateTimeService,
StepLineSeriesService,
ColumnSeriesService,
LegendService,
TooltipService,
CategoryService,
ISharedTooltipRenderEventArgs
} from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
@Component({
imports: [ChartModule],
providers: [DateTimeService, StepLineSeriesService, LegendService, TooltipService, CategoryService, ColumnSeriesService],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]='primaryXAxis'
[primaryYAxis]='primaryYAxis'
[title]='title'
[tooltip]='tooltip'
(sharedTooltipRender)='onSharedTooltipRender($event)'>
<e-series-collection>
<e-series
[dataSource]='chartData'
type='StepLine'
xName='x'
yName='y'
width='2'
name='China'
[marker]='marker'>
</e-series>
<e-series
[dataSource]='chartData'
type='Column'
xName='x'
yName='y1'
name='USA'>
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public chartData?: Object[];
public title?: string;
public marker?: Object;
public tooltip?: Object;
ngOnInit(): void {
this.chartData = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];
this.primaryXAxis = {
valueType: 'DateTime'
};
this.primaryYAxis = { title: 'Rate (%)' };
// Enable shared tooltip
this.tooltip = {
enable: true,
shared: true
};
this.marker = { visible: true, width: 10, height: 10 };
this.title = 'Unemployment Rates 1975-2010';
}
// Event: customize the shared tooltip before it renders
public onSharedTooltipRender(args: ISharedTooltipRenderEventArgs): void {
console.log('Shared tooltip rendered event was triggered');
// Update the header text
args.headerText = 'Shared Tooltip';
// Customize each line of the shared tooltip text
if (args.text && args.text.length) {
// Example transformation: "China : 16" -> "China value: 16%"
args.text = args.text.map((line: string) => {
return line.replace(':', ' value:') + '%';
});
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Legend
legendRender
Before a legend item is rendered, the legendRender event will be triggered to customize the legend text, shape, and fill. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
BarSeriesService,
ColumnSeriesService,
LineSeriesService,
LegendService,
DataLabelService,
MultiLevelLabelService,
SelectionService,
ILegendRenderEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [
CategoryService,
BarSeriesService,
ColumnSeriesService,
LineSeriesService,
LegendService,
DataLabelService,
MultiLevelLabelService,
SelectionService
],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
[legendSettings]="legendSettings"
(legendRender)="onLegendRender($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Column"
xName="country"
yName="gold"
name="Gold">
</e-series>
<e-series
[dataSource]="chartData"
type="Column"
xName="country"
yName="silver"
name="Silver">
</e-series>
<e-series
[dataSource]="chartData"
type="Column"
xName="country"
yName="bronze"
name="Bronze">
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public legendSettings?: Object;
public title?: string;
public chartData?: { country: string; gold: number; silver: number; bronze: number }[];
ngOnInit(): void {
this.chartData = [
{ country: 'USA', gold: 50, silver: 70, bronze: 45 },
{ country: 'China', gold: 40, silver: 60, bronze: 55 },
{ country: 'Japan', gold: 70, silver: 60, bronze: 50 },
{ country: 'Australia', gold: 60, silver: 56, bronze: 40 },
{ country: 'France', gold: 50, silver: 45, bronze: 35 },
{ country: 'Germany', gold: 40, silver: 30, bronze: 22 },
{ country: 'Italy', gold: 40, silver: 35, bronze: 37 },
{ country: 'Sweden', gold: 30, silver: 25, bronze: 27 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Countries' };
this.primaryYAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
this.legendSettings = { visible: true, position: 'Top' };
this.title = 'Olympic Medals';
}
// legendRender: customize legend items before they are rendered
public onLegendRender(args: ILegendRenderEventArgs): void {
console.log('Legend render event was triggered');
switch (args.text) {
case 'Gold':
args.text = 'Gold (Au)';
args.fill = '#FFC107';
args.shape = 'Circle';
break;
case 'Silver':
args.fill = '#9E9E9E';
args.shape = 'Rectangle';
break;
case 'Bronze':
args.fill = '#CD7F32';
args.shape = 'Diamond';
break;
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));legendClick
The legendClick event will be triggered when a legend item is clicked. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
BarSeriesService,
ColumnSeriesService,
LineSeriesService,
LegendService,
DataLabelService,
MultiLevelLabelService,
SelectionService,
ILegendClickEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [
CategoryService,
BarSeriesService,
ColumnSeriesService,
LineSeriesService,
LegendService,
DataLabelService,
MultiLevelLabelService,
SelectionService
],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
[legendSettings]="legendSettings"
(legendClick)="onLegendClick($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Column"
xName="country"
yName="gold"
name="Gold">
</e-series>
<e-series
[dataSource]="chartData"
type="Column"
xName="country"
yName="silver"
name="Silver">
</e-series>
<e-series
[dataSource]="chartData"
type="Column"
xName="country"
yName="bronze"
name="Bronze">
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public legendSettings?: Object;
public title?: string;
public chartData?: { country: string; gold: number; silver: number; bronze: number }[];
ngOnInit(): void {
this.chartData = [
{ country: 'USA', gold: 50, silver: 70, bronze: 45 },
{ country: 'China', gold: 40, silver: 60, bronze: 55 },
{ country: 'Japan', gold: 70, silver: 60, bronze: 50 },
{ country: 'Australia', gold: 60, silver: 56, bronze: 40 },
{ country: 'France', gold: 50, silver: 45, bronze: 35 },
{ country: 'Germany', gold: 40, silver: 30, bronze: 22 },
{ country: 'Italy', gold: 40, silver: 35, bronze: 37 },
{ country: 'Sweden', gold: 30, silver: 25, bronze: 27 }
];
this.primaryXAxis = {
valueType: 'Category',
title: 'Countries'
};
this.primaryYAxis = {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
};
this.legendSettings = { visible: true, position: 'Top' };
this.title = 'Olympic Medals';
}
// legendClick: fired when a legend item is clicked
public onLegendClick(args: ILegendClickEventArgs): void {
console.log('legendClick:', {
legendText: args.legendText,
seriesIndex: args.series?.index,
isVisible: args.series?.visible
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Annotations
annotationRender
Before the chart annotation is rendered, the annotationRender event will be triggered. To know more about the arguments of this event, refer here.
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
LegendService,
ChartAnnotationService,
ChartAnnotationSettingsModel,
IAnnotationRenderEventArgs,
} from '@syncfusion/ej2-angular-charts';
@Component({
standalone: true,
selector: 'app-container',
imports: [ChartModule],
providers: [
CategoryService,
LineSeriesService,
LegendService,
ChartAnnotationService,
],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-chart
id='chart-container'
[primaryXAxis]='primaryXAxis'
[primaryYAxis]='primaryYAxis'
[title]='title'
[annotations]='annotations'
(annotationRender)='onAnnotationRender($event)'
>
<e-series-collection>
<e-series
type='Line'
name='Sales'
xName='month'
yName='sales'
[marker]='{ visible: true }'
[dataSource]='chartData'>
</e-series>
</e-series-collection>
</ejs-chart>
`,
})
export class AppComponent implements OnInit {
public primaryXAxis: object = { valueType: 'Category' };
public primaryYAxis: object = { labelFormat: '${value}K' };
public title = 'Sales Analysis';
public chartData = [
{ month: 'Jan', sales: 35 },
{ month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 },
{ month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 },
{ month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 },
{ month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 },
{ month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 },
{ month: 'Dec', sales: 32 },
];
// Define an annotation at the peak data point (Aug, 55)
public annotations: ChartAnnotationSettingsModel[] = [
{
content: '<div class="anno">Peak</div>',
x: 'Aug',
y: 55,
coordinateUnits: 'Point',
region: 'Chart',
},
];
ngOnInit(): void {
// no-op
}
// Customize or cancel annotation before it renders
public onAnnotationRender(args: IAnnotationRenderEventArgs): void {
console.log('Annotation render event was triggered');
if (args.content instanceof HTMLElement) {
args.content.style.padding = '4px 8px';
args.content.style.background = '#ffeb3b';
args.content.style.color = '#000';
args.content.style.borderRadius = '4px';
args.content.style.boxShadow = '0 1px 3px rgba(0,0,0,0.2)';
args.content.style.fontWeight = '600';
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Zooming and Scrolling
zooming
During zoom or pan interactions, the zooming event will be triggered, providing per-axis zoom information that can be modified or canceled. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
IZoomingEventArgs,
IZoomCompleteEventArgs,
ZoomService
} from '@syncfusion/ej2-angular-charts';
import {
CategoryService,
LegendService,
DataLabelService,
LineSeriesService
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LegendService, DataLabelService, LineSeriesService, ZoomService],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[legendSettings]="legendSettings"
[title]="title"
[zoomSettings]="zoomSettings"
(onZooming)="onZooming($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales"
[marker]="marker">
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public primaryYAxis?: Object;
public legendSettings?: Object;
public marker?: Object;
public title?: string;
public zoomSettings?: Object;
ngOnInit(): void {
// Data label for chart series
this.marker = {
dataLabel: {
visible: true
}
};
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = {
valueType: 'Category'
};
this.primaryYAxis = {
labelFormat: '${value}K'
};
this.legendSettings = { visible: true };
this.title = 'Sales Analysis';
// Enable zooming (selection zooming on X-axis)
this.zoomSettings = {
enableSelectionZooming: true,
enablePan: true,
mode: 'X'
};
}
// Fires when zoom selection starts
public onZooming(args: IZoomingEventArgs): void {
console.log('Zoom selection started event was triggered', args);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));zoomComplete
After a zoom or pan action completes for an axis, the zoomComplete event will be triggered. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
IAxisLabelRenderEventArgs,
IZoomCompleteEventArgs,
ZoomService
} from '@syncfusion/ej2-angular-charts';
import {
CategoryService,
LegendService,
DataLabelService,
LineSeriesService
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LegendService, DataLabelService, LineSeriesService, ZoomService],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[legendSettings]="legendSettings"
[title]="title"
[zoomSettings]="zoomSettings"
(zoomComplete)="onZoomComplete($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales"
[marker]="marker">
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public primaryYAxis?: Object;
public legendSettings?: Object;
public marker?: Object;
public title?: string;
public zoomSettings?: Object;
ngOnInit(): void {
// Data label for chart series
this.marker = {
dataLabel: {
visible: true
}
};
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = {
valueType: 'Category'
};
this.primaryYAxis = {
labelFormat: '${value}K'
};
this.legendSettings = { visible: true };
this.title = 'Sales Analysis';
// Enable zooming (selection zooming on X-axis)
this.zoomSettings = {
enableSelectionZooming: true,
enablePan: true,
mode: 'X'
};
}
// Zoom complete handler (deprecated event)
public onZoomComplete(args: IZoomCompleteEventArgs): void {
console.log('Zoom complete event was triggered');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));scrollChanged
During scrollbar interactions, the scrollChanged event will be triggered to indicate visible range or zoom changes. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LegendService,
DataLabelService,
LineSeriesService,
ScrollBarService
} from '@syncfusion/ej2-angular-charts';
import { IScrollEventArgs } from '@syncfusion/ej2-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LegendService, DataLabelService, LineSeriesService, ScrollBarService],
standalone: true,
selector: 'app-container',
template: `
<div style="margin-bottom:8px;">
<b>Scroll info:</b>
</div>
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[legendSettings]="legendSettings"
[title]="title"
(scrollChanged)="onScrollChanged($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales"
[marker]="marker">
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: any;
public primaryYAxis?: any;
public legendSettings?: any;
public marker?: any;
public title?: string;
public chartData?: { month: string; sales: number }[];
public scrollInfo = 'Scroll to see updates...';
ngOnInit(): void {
this.marker = { dataLabel: { visible: true } };
// Generate enough points so the scrollbar is useful
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
this.chartData = Array.from({ length: 60 }, (_, i) => {
const label = `${months[i % 12]} ${2022 + Math.floor(i / 12)}`;
return { month: label, sales: Math.floor(20 + Math.random() * 40) };
});
// Enable axis scrollbar
this.primaryXAxis = {
valueType: 'Category',
scrollbarSettings: { enable: true },
labelIntersectAction: 'Rotate45'
};
this.primaryYAxis = { labelFormat: '${value}K' };
this.legendSettings = { visible: true };
this.title = 'Sales Analysis';
}
// Fires whenever the axis scrollbar position/range changes
public onScrollChanged(args: IScrollEventArgs): void {
console.log("scroll changed event was triggered");
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Selection and Drag
dragComplete
After a drag-selection area or zoom region is completed, the dragComplete event will be triggered. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
SelectionService
} from '@syncfusion/ej2-angular-charts';
import { IDragCompleteEventArgs } from '@syncfusion/ej2-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LineSeriesService, SelectionService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
[selectionMode]="'DragXY'"
(dragComplete)="onDragComplete($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// Handler for drag selection completion
onDragComplete(args: IDragCompleteEventArgs): void {
console.log(`onDragComplete event was triggered`);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));selectionComplete
After a selection action (by click or drag) completes, the selectionComplete event will be triggered. To know more about the arguments of this event, refer here.
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { CategoryService, ColumnSeriesService, ISelectionCompleteEventArgs } from '@syncfusion/ej2-angular-charts'
import { LegendService, SelectionService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
ChartModule
],
providers: [ CategoryService, ColumnSeriesService, LegendService, SelectionService],
standalone: true,
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis" [title]="title" selectionMode="Point" (selectionComplete)="onSelectionComplete($event)">
<e-series-collection>
<e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold' ></e-series>
<e-series [dataSource]='chartData' type='Column' xName='country' yName='silver' name='Silver'></e-series>
<e-series [dataSource]='chartData' type='Column' xName='country' yName='bronze' name='Bronze' ></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
ngOnInit(): void {
this.chartData = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];
this.primaryXAxis = {
valueType: 'Category',
title: 'Countries'
};
this.title = 'Olympic Medals';
}
public onSelectionComplete(args: ISelectionCompleteEventArgs): void {
console.log("Selection Complete event was triggered");
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Mouse Events
chartMouseDown
The chartMouseDown event will be triggered when a mouse down action occurs over the chart area. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
IMouseEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(chartMouseDown)="onChartMouseDown($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// chartMouseDown: fires on mouse down within the chart area
public onChartMouseDown(args: IMouseEventArgs): void {
console.log('chartMouseDown:', {
target: args.target,
x: args.x,
y: args.y
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));chartMouseMove
The chartMouseMove event will be triggered when the mouse moves over the chart area. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
IMouseEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(chartMouseMove)="onChartMouseMove($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// chartMouseMove: fires on mouse move within the chart area
public onChartMouseMove(args: IMouseEventArgs): void {
console.log('chartMouseMove:', {
target: args.target,
x: args.x,
y: args.y
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));chartMouseUp
The chartMouseUp event will be triggered when a mouse up action occurs over the chart area. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
IMouseEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(chartMouseUp)="onChartMouseUp($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// chartMouseUp: fires on mouse up within the chart area
public onChartMouseUp(args: IMouseEventArgs): void {
console.log('chartMouseUp:', { target: args.target, x: args.x, y: args.y });
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));chartMouseLeave
The chartMouseLeave event will be triggered when the mouse leaves the chart area. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
IMouseEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(chartMouseLeave)="onChartMouseLeave($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// chartMouseLeave: fires when the mouse leaves the chart area
public onChartMouseLeave(args: IMouseEventArgs): void {
console.log('chartMouseLeave:', {
target: args.target,
x: args.x,
y: args.y
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));chartMouseClick
The chartMouseClick event will be triggered when a mouse click occurs within the chart area. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
IMouseEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(chartMouseClick)="onChartMouseClick($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// chartMouseClick: fires on any click within the chart area (axes, series, legend, tooltip, etc.)
public onChartMouseClick(args: IMouseEventArgs): void {
console.log('chartMouseClick:', {
target: args.target,
x: args.x,
y: args.y
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));chartDoubleClick
The chartDoubleClick event will be triggered when a double-click occurs within the chart area. Use this event to reset zoom, toggle modes, or open detailed panels based on the double-click location. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
IMouseEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(chartDoubleClick)="onchartDoubleClick($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// chartMouseClick: fires on any click within the chart area (axes, series, legend, tooltip, etc.)
public onchartDoubleClick(args: IMouseEventArgs): void {
console.log('chartDoubleClick:', {
target: args.target,
x: args.x,
y: args.y
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Life cycle and Layout
load
Before the chart starts initial rendering, the load event will be triggered. Use this event to set themes, localization, palettes, or modify chart/series properties programmatically prior to rendering. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
ILoadedEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(load)="onLoad($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// loaded: fires after chart is rendered in the DOM
public onLoad(args: ILoadedEventArgs): void {
console.log('Chart load event triggered');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));loaded
After the chart is fully loaded and initial rendering is completed, the loaded event will be triggered. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
ILoadedEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(loaded)="onLoaded($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Sales' };
this.title = 'Monthly Sales';
}
// loaded: fires after chart is rendered in the DOM
public onLoaded(args: ILoadedEventArgs): void {
const element = args.chart?.element as HTMLElement;
const bbox = element?.getBoundingClientRect();
console.log('Chart loaded:', {
title: args.chart?.title,
width: bbox?.width,
height: bbox?.height
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));beforeResize
Before a resize is performed, the beforeResize event will be triggered, and you can cancel the subsequent resizing. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
IResizeEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<div style="width:650px; height:350px;">
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
(beforeResize)="onBeforeResize($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: { month: string; sales: number }[];
ngOnInit(): void {
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category' };
}
// beforeResize event: fires before the chart starts its resize re-layout
public onBeforeResize(args: IResizeEventArgs): void {
console.log('beforeResize:', {
currentSize: (args as any).currentSize,
previousSize: (args as any).previousSize
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));resized
After the chart has been resized, the resized event will be triggered. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LegendService,
DataLabelService,
LineSeriesService,
IResizeEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LegendService, DataLabelService, LineSeriesService],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[legendSettings]="legendSettings"
[title]="title"
(resized)="onResized($event)">
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales"
[marker]="marker">
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: { month: string; sales: number }[];
public primaryYAxis?: Object;
public legendSettings?: Object;
public marker?: Object;
public title?: string;
ngOnInit(): void {
// Data label for chart series
this.marker = {
dataLabel: { visible: true }
};
this.chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryXAxis = { valueType: 'Category' };
this.primaryYAxis = { labelFormat: '${value}K' };
this.legendSettings = { visible: true };
this.title = 'Sales Analysis';
}
// resized: fires after the chart completes resizing
public onResized(args: IResizeEventArgs): void {
console.log('Chart resized:', {
currentSize: (args as any).currentSize,
previousSize: (args as any).previousSize
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));beforePrint
The beforePrint event will be triggered before the chart is printed, providing access to the HTML content being printed. To know more about the arguments of this event, refer here.
import { Component, OnInit, ViewChild } from '@angular/core';
import {
ChartModule,
ChartAllModule,
ChartComponent,
IPrintEventArgs,
AreaSeriesService,
LineSeriesService,
ExportService,
ColumnSeriesService,
StackingColumnSeriesService,
StackingAreaSeriesService,
RangeColumnSeriesService,
ScatterSeriesService,
PolarSeriesService,
CategoryService,
RadarSeriesService,
SplineSeriesService
} from '@syncfusion/ej2-angular-charts';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
@Component({
imports: [ChartModule, ButtonModule, ChartAllModule],
providers: [
AreaSeriesService,
LineSeriesService,
ExportService,
ColumnSeriesService,
StackingColumnSeriesService,
StackingAreaSeriesService,
RangeColumnSeriesService,
ScatterSeriesService,
PolarSeriesService,
CategoryService,
RadarSeriesService,
SplineSeriesService
],
standalone: true,
selector: 'app-container',
template: `
<div class="col-md-8">
<button ej-button id="print" (click)="print()">Print</button>
<ejs-chart
#chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(beforePrint)="onBeforePrint($event)">
<e-series-collection>
<e-series
[dataSource]="data"
type="Radar"
xName="x"
yName="y"
drawType="Line">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public title?: string;
public data?: { x: number; y: number }[];
@ViewChild('chart')
public chartObj?: ChartComponent;
ngOnInit(): void {
this.data = [
{ x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
{ x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }
];
this.primaryXAxis = {
title: 'Year',
coefficient: 90,
minimum: 2004,
maximum: 2012,
interval: 1
};
this.primaryYAxis = {
minimum: 20,
maximum: 40,
interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
};
this.title = 'Efficiency of oil-fired power production';
}
// Trigger print
public print(): void {
this.chartObj?.print();
}
// beforePrint: customize what gets printed
public onBeforePrint(args: IPrintEventArgs): void {
// Clone the chart element so we can safely modify the print content
console.log("before print event was triggered");
const cloned = (this.chartObj?.element.cloneNode(true) as HTMLElement) ?? undefined;
if (!cloned) { return; }
// Example: add a simple watermark to the print content
const watermark = document.createElement('div');
watermark.textContent = 'CONFIDENTIAL';
Object.assign(watermark.style, {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%) rotate(-30deg)',
color: 'rgba(0,0,0,0.15)',
fontSize: '48px',
fontWeight: '700',
pointerEvents: 'none',
zIndex: '1',
whiteSpace: 'nowrap'
} as CSSStyleDeclaration);
// Wrap cloned chart and overlay watermark
const wrapper = document.createElement('div');
Object.assign(wrapper.style, { position: 'relative' } as CSSStyleDeclaration);
wrapper.appendChild(cloned);
wrapper.appendChild(watermark);
args.htmlContent = wrapper;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));beforeExport
Before a chart export operation begins (such as exporting to PNG, JPEG, SVG, or PDF), the beforeExport event will be triggered, allowing you to customize file name, export type, page settings, or cancel the export. To know more about the arguments of this event, refer here.
import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import {
AreaSeriesService,
LineSeriesService,
ExportService,
ColumnSeriesService,
StackingColumnSeriesService,
StackingAreaSeriesService,
RangeColumnSeriesService,
ScatterSeriesService,
PolarSeriesService,
CategoryService,
RadarSeriesService,
SplineSeriesService,
ILoadedEventArgs,
IExportEventArgs
} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [ChartModule, ButtonModule, ChartAllModule],
providers: [
AreaSeriesService,
LineSeriesService,
ExportService,
ColumnSeriesService,
StackingColumnSeriesService,
StackingAreaSeriesService,
RangeColumnSeriesService,
ScatterSeriesService,
PolarSeriesService,
CategoryService,
RadarSeriesService,
SplineSeriesService
],
standalone: true,
selector: 'app-container',
template: `
<div class="col-md-8">
<ejs-chart id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(loaded)="loaded($event)"
(beforeExport)="beforeExport($event)">
<e-series-collection>
<e-series [dataSource]="data" type="Radar" xName="x" yName="y" drawType="Line"></e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public title?: string;
public primaryYAxis?: Object;
public data?: Object[];
public loaded!: (args: ILoadedEventArgs) => void;
ngOnInit(): void {
this.data = [
{ x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 },
{ x: 2008, y: 27 }, { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }
];
this.primaryXAxis = {
title: 'Year', coefficient: 90,
minimum: 2004, maximum: 2012, interval: 1
};
this.primaryYAxis = {
minimum: 20, maximum: 40, interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
};
this.title = 'Efficiency of oil-fired power production';
// Trigger an export after chart load (for demo)
this.loaded = (args: ILoadedEventArgs) => {
// Exports as PNG; beforeExport will be raised just before this export executes
args.chart.exportModule.export('PNG', 'export');
};
}
// beforeExport event handler to customize export settings
public beforeExport(args: IExportEventArgs): void {
console.log("before export event was triggered");
// Customize export settings before the export happens
args.fileName = 'custom-export';
args.width = 800; // exported image/PDF width
args.height = 600; // exported image/PDF height
args.orientation = 'Landscape'; // for PDF exports
args.theme = 'MaterialDark'; // apply export theme
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));afterExport
After a chart export operation completes, the afterExport event will be triggered. Use this event to perform post-export actions such as notifications, logging, or initiating downloads in custom flows. To know more about the arguments of this event, refer here.
import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import {
AreaSeriesService,
LineSeriesService,
ExportService,
ColumnSeriesService,
StackingColumnSeriesService,
StackingAreaSeriesService,
RangeColumnSeriesService,
ScatterSeriesService,
PolarSeriesService,
CategoryService,
RadarSeriesService,
SplineSeriesService,
ILoadedEventArgs,
IAfterExportEventArgs
} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [ChartModule, ButtonModule, ChartAllModule],
providers: [
AreaSeriesService,
LineSeriesService,
ExportService,
ColumnSeriesService,
StackingColumnSeriesService,
StackingAreaSeriesService,
RangeColumnSeriesService,
ScatterSeriesService,
PolarSeriesService,
CategoryService,
RadarSeriesService,
SplineSeriesService
],
standalone: true,
selector: 'app-container',
template: `
<div class="col-md-8">
<ejs-chart id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
(loaded)="loaded($event)"
(afterExport)="afterExport($event)">
<e-series-collection>
<e-series [dataSource]="data" type="Radar" xName="x" yName="y" drawType="Line"></e-series>
</e-series-collection>
</ejs-chart>
</div>
`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public title?: string;
public primaryYAxis?: Object;
public data?: Object[];
public loaded!: (args: ILoadedEventArgs) => void;
ngOnInit(): void {
this.data = [
{ x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 },
{ x: 2008, y: 27 }, { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }
];
this.primaryXAxis = {
title: 'Year', coefficient: 90,
minimum: 2004, maximum: 2012, interval: 1
};
this.primaryYAxis = {
minimum: 20, maximum: 40, interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
};
this.title = 'Efficiency of oil-fired power production';
// Trigger an export after the chart loads (for demo)
this.loaded = (args: ILoadedEventArgs) => {
args.chart.exportModule.export('PNG', 'export');
};
}
// afterExport event handler - invoked after export completes
public afterExport(args: IAfterExportEventArgs): void {
// Common post-export tasks: notify user, log, or use returned data
console.log('Chart after export event was triggered', args);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));