Chart Events in Angular Chart
31 Aug 202624 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 component. 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.
For a full list of supported Angular and Syncfusion package versions, see the Getting Started page. Every event documented here requires the relevant service to be added to the component’s providers array (for example, CategoryService, LineSeriesService, TooltipService, SelectionService, DataEditingService, ZoomService, ScrollBarService, ExportService).
Available events
| Group | Events |
|---|---|
| Animation | animationComplete |
| Labels and Axes |
axisLabelRender, axisLabelClick, axisRangeCalculated, axisMultiLabelRender, multiLevelLabelClick
|
| Series and Points |
seriesRender, pointClick, pointDoubleClick, pointMove, pointRender, textRender
|
| Data Editing (Drag) |
dragStart, drag, dragEnd
|
| Tooltip |
tooltipRender, sharedTooltipRender
|
| Legend |
legendRender, legendClick
|
| Annotations | annotationRender |
| Zooming and Scrolling |
zooming, zoomComplete, scrollChanged, scrollStart, scrollEnd
|
| Selection and Drag |
dragComplete, selectionComplete
|
| Mouse Events |
chartMouseDown, chartMouseMove, chartMouseUp, chartMouseLeave, chartMouseClick, chartDoubleClick
|
| Life cycle and Layout |
load, loaded, beforeResize, resized, beforePrint, beforeExport, afterExport
|
Animation
animationComplete
Triggered after a series animation completes. Use this event to chain additional UI work, run custom transitions, or release a loading indicator. The series must have animation.enable = true for this event to fire. To know more about the arguments of this event, refer here.
import { ChartModule } 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],
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
Triggered before an axis label is rendered so you can customize its text and style. Set args.cancel = true to hide an individual label. 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
Triggered when an axis label is clicked. Use it to drill into a category, toggle an axis-level filter, or open a side panel for the clicked label. 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
Triggered after the axis range (minimum, maximum, and interval) is calculated, allowing you to override the values. For category axes, minimum and maximum apply to category index positions rather than labels. 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';
@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
Triggered before multi-level axis labels are rendered so you can customize their text and style. Multi-level labels must be configured on the axis via the multiLevelLabels property; the MultiLevelLabelService provider is also required. 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
Triggered when a multi-level axis label segment is clicked. Requires the MultiLevelLabelService provider and multiLevelLabels to be configured on the axis. 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
Triggered before a series is rendered so you can customize its appearance and properties (for example, fill, opacity, border, width, or columnWidth). 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: customize series appearance before rendering
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
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. Inspect args.point, args.series, args.pointIndex, and args.seriesIndex for details. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
ColumnSeriesService,
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', {
x: args.point?.x,
y: args.point?.y,
seriesIndex: args.seriesIndex,
pointIndex: args.pointIndex
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));pointDoubleClick
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,
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';
}
// pointDoubleClick: fires when a data point is double-clicked
public onPointDoubleClick(args: IPointEventArgs): void {
console.log('Point Double Click event was triggered', {
x: args.point?.x,
y: args.point?.y,
seriesIndex: args.seriesIndex,
pointIndex: args.pointIndex
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));pointMove
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,
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';
}
// pointMove: fires when the pointer moves over a data point
public onPointMove(args: IPointEventArgs): void {
console.log('Point Move event was triggered', {
x: args.point?.x,
y: args.point?.y
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));pointRender
Triggered before an individual data point is rendered so you can customize its visual properties such as fill, border, shape, size, and corner radius. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
ColumnSeriesService,
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 {
// Highlight the highest value in red and the lowest in green
if (typeof args.point?.y === 'number') {
const yValues = (this.chartData || []).map(d => d.sales);
const max = Math.max(...yValues);
const min = Math.min(...yValues);
if (args.point.y === max) {
args.fill = '#e74c3c';
} else if (args.point.y === min) {
args.fill = '#27ae60';
}
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));textRender (Data Labels)
Triggered before a data label is rendered so you can customize label text, style, template, or position. You can also set args.font and args.color to format the label. 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 {
// 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} ★`;
args.color = '#e74c3c';
args.font = { fontWeight: '700', size: '14px' };
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Data Editing (Drag)
dragStart
Triggered when a data point drag operation begins on a series with dragging enabled (via dragSettings). Requires the DataEditingService provider and the series to have dragSettings.enable = true. 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 the UI as the point’s position changes. Requires the DataEditingService provider. 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 completes (pointer released) and the new value is committed. Use this event to persist changes, refresh related UI, or perform post-edit actions. Requires the DataEditingService provider. 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
Triggered before a tooltip for a point in a single-series tooltip is shown so you can customize content and style. Requires the TooltipService provider and tooltip.enable = true. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
TooltipService,
ITooltipRenderEventArgs,
TooltipSettingsModel
} 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 {
// Append currency formatting to the tooltip text
if (typeof args.text === 'string' && args.point && typeof args.point.y === 'number') {
args.text = `${args.point.x} : $${args.point.y}K`;
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));sharedTooltipRender
Triggered before a shared tooltip is shown (aggregating multiple series at the same x-value) so you can customize the aggregated content. Requires the TooltipService provider and tooltip.shared = true. 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
Triggered before a legend item is rendered so you can customize the legend text, shape, and fill. The shape value must be a valid LegendShape enum value (for example, Circle, Rectangle, Diamond). 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
Triggered when a legend item is clicked. Use this event to filter, isolate, or highlight related data in response to the selection. 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
Triggered before each chart annotation is rendered so you can customize or cancel it. Requires the ChartAnnotationService provider and an annotations configuration on the chart. 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
Triggered during zoom or pan interactions, providing per-axis zoom information that can be modified or canceled. Requires the ZoomService provider and zoomSettings to be configured on the chart. 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"
(zooming)="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
Triggered after a zoom or pan action completes for an axis. Requires the ZoomService provider and zoomSettings to be configured on the chart. 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
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
Triggered during scrollbar interactions to indicate visible range or zoom changes. Requires the ScrollBarService provider and scrollbarSettings.enable = true on the axis. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LegendService,
DataLabelService,
LineSeriesService,
ScrollBarService,
IScrollEventArgs
} from '@syncfusion/ej2-angular-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));scrollStart
Triggered when a scrollbar interaction begins. Use this event to capture the previous range before the user changes the viewport, or to apply initial constraints when scrolling starts. Requires the ScrollBarService provider and scrollbarSettings.enable = true on the axis. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LegendService,
DataLabelService,
LineSeriesService,
ScrollBarService,
ZoomService,
IResizeEventArgs,
IScrollEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LegendService, DataLabelService, LineSeriesService, ScrollBarService, ZoomService],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[legendSettings]="legendSettings"
[title]="title"
[zoomSettings]="zoomSettings"
(scrollStart)="onScrollStart($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?: Object;
public marker?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
public zoomSettings?: any;
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 }
];
// Enable scrollbar on the X axis
this.primaryXAxis = {
valueType: 'Category',
scrollbarSettings: { enable: true }
};
this.primaryYAxis = { labelFormat: '${value}K' };
this.legendSettings = { visible: true };
this.title = 'Sales Analysis';
// Enable zooming (selection, mouse wheel, pinch) on X-axis
this.zoomSettings = {
enableSelectionZooming: true,
enableMouseWheelZooming: true,
enablePinchZooming: true,
enableDeferredZooming: false,
mode: 'X' // Zoom horizontally; use 'XY' to allow both axes
};
}
// Fires when the scrollbar interaction starts
public onScrollStart(args: IScrollEventArgs): void {
console.log('Scroll started:', this.rangeInfo(args));
}
private rangeInfo(args: IScrollEventArgs) {
const c = (args as any).currentRange || {};
const p = (args as any).previousRange || {};
return {
axis: (args as any).axis?.name,
current: { start: c.minimum, end: c.maximum },
previous: { start: p.minimum, end: p.maximum }
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));scrollEnd
Triggered when a scrollbar interaction ends and the new viewport range is committed. Use this event to persist the visible range or to refresh related UI. Requires the ScrollBarService provider and scrollbarSettings.enable = true on the axis. To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LegendService,
DataLabelService,
LineSeriesService,
ScrollBarService,
ZoomService,
IResizeEventArgs,
IScrollEventArgs
} from '@syncfusion/ej2-angular-charts';
@Component({
imports: [ChartModule],
providers: [CategoryService, LegendService, DataLabelService, LineSeriesService, ScrollBarService, ZoomService],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart
id="chart-container"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[legendSettings]="legendSettings"
[title]="title"
[zoomSettings]="zoomSettings"
(scrollEnd)="onScrollEnd($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?: Object;
public marker?: Object;
public title?: string;
public chartData?: { month: string; sales: number }[];
public zoomSettings?: any;
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 }
];
// Enable scrollbar on the X axis
this.primaryXAxis = {
valueType: 'Category',
scrollbarSettings: { enable: true }
};
this.primaryYAxis = { labelFormat: '${value}K' };
this.legendSettings = { visible: true };
this.title = 'Sales Analysis';
// Enable zooming (selection, mouse wheel, pinch) on X-axis
this.zoomSettings = {
enableSelectionZooming: true,
enableMouseWheelZooming: true,
enablePinchZooming: true,
enableDeferredZooming: false,
mode: 'X' // Zoom horizontally; use 'XY' to allow both axes
};
}
// Fires when the scrollbar interaction ends
public onScrollEnd(args: IScrollEventArgs): void {
console.log('Scroll end', this.rangeInfo(args));
}
private rangeInfo(args: IScrollEventArgs) {
const c = (args as any).currentRange || {};
const p = (args as any).previousRange || {};
return {
axis: (args as any).axis?.name,
current: { start: c.minimum, end: c.maximum },
previous: { start: p.minimum, end: p.maximum }
};
}
}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
Triggered after a drag-selection area or zoom region is completed. Requires the SelectionService provider and selectionMode to be set to a drag-based value (for example, DragXY, DragX, or DragY). To know more about the arguments of this event, refer here.
import { Component, OnInit } from '@angular/core';
import {
ChartModule,
CategoryService,
LineSeriesService,
SelectionService,
IDragCompleteEventArgs
} from '@syncfusion/ej2-angular-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
Triggered after a selection action (by click or drag) completes. Requires the SelectionService provider and selectionMode to be set to a value that enables selection (for example, Point, Series, Cluster, DragXY). 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
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
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
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
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
Triggered when a mouse click occurs within the chart area (axes, series, legend, tooltip, etc.). 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
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';
}
// chartDoubleClick: fires on a double-click within the chart area
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
Triggered before the chart starts initial rendering. 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
Triggered after the chart is fully loaded and initial rendering is complete. 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
Triggered before a resize is performed; you can cancel the subsequent resize by setting args.cancel = true. 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
Triggered after the chart has been resized. 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
Triggered before the chart is printed, providing access to the HTML content being printed via args.htmlContent. Use this to add watermarks, headers/footers, or to modify the cloned chart element before printing. To know more about the arguments of this event, refer here.
import { Component, OnInit, ViewChild } from '@angular/core';
import {
ChartModule,
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],
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 ejs-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
Triggered before a chart export operation begins (such as exporting to PNG, JPEG, SVG, or PDF), allowing you to customize fileName, export type, page settings, theme, or cancel the export. Requires the ExportService provider. To know more about the arguments of this event, refer here.
import { ChartModule } from '@syncfusion/ej2-angular-charts'
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],
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
Triggered after a chart export operation completes. Use this event to perform post-export actions such as notifications, logging, or initiating downloads in custom flows. Requires the ExportService provider. To know more about the arguments of this event, refer here.
import { ChartModule } from '@syncfusion/ej2-angular-charts'
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],
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));Common event arguments
Most event argument objects share a common shape. The table below lists the properties you are most likely to use.
| Property | Type | Description |
|---|---|---|
args.chart |
Chart |
The chart instance that raised the event. |
args.series |
Series |
The series associated with the event (point, render, and selection events). |
args.point |
Points |
The data point associated with the event (point, text render, and tooltip events). |
args.pointIndex |
number |
Index of the data point in its series. |
args.seriesIndex |
number |
Index of the series in the series collection. |
args.cancel |
boolean |
Set to true to cancel the default action of the event. |
args.x, args.y
|
number |
Mouse coordinates in the chart’s local coordinate system (mouse events). |
args.target |
HTMLElement |
The DOM element under the pointer (mouse events). |
For complete properties of a specific event, follow the API link in each section above.
Troubleshooting
-
Event does not fire — Make sure the relevant service is registered in the component’s
providersarray (for example,TooltipServicefor tooltip events,ZoomServicefor zoom events,SelectionServicefor selection events,DataEditingServicefor drag-to-edit events). -
args.cancelhas no effect — Only events that explicitly mention cancellation in the API reference supportargs.cancel. For example,beforeResizesupports cancellation, butloadeddoes not. -
tooltipRenderdoes not fire — Tooltip events only fire whentooltip.enable = true.sharedTooltipRenderadditionally requirestooltip.shared = true. -
zooming/zoomCompletedo not fire — ConfigurezoomSettingsand ensureenableSelectionZooming,enableMouseWheelZooming, orenablePinchZoomingis set totrue. -
selectionComplete/dragCompletedo not fire — SetselectionModeto a value other thanNone(for example,Point,Series,Cluster,DragXY). -
dragStart/drag/dragEnddo not fire — The series must havedragSettings.enable = trueand theDataEditingServiceprovider must be registered. -
scrollChanged/scrollStart/scrollEnddo not fire — Enable the scrollbar on the axis (scrollbarSettings.enable = true) and register theScrollBarServiceprovider.