The annotations are used to mark the specific area of interest in the chart area with texts, shapes or images.
By using the content
option of annotation property, you can specify the Id of the element that needs
to be displayed in the chart area.
import { Component, OnInit } from '@angular/core';
import { pieData } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="chart-container">
<e-accumulation-annotations>
<e-accumulation-annotation content='<div style="border: 1px solid black; background-color:#f5f5f5; padding: 5px 5px 5px 5px">3.5</div>'
region='Series' coordinateUnits='Point' x='Feb' y=3.5>
</e-accumulation-annotation>
</e-accumulation-annotations>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='piedata' xName='x' yName='y'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public piedata: Object[];
ngOnInit(): void {
this.piedata = pieData;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Note: To use annotation feature in accumulation chart, we need to inject AccumulationAnnotationService
into the @NgModule.providers
.
The annotation can be placed with respect to either Series
or Chart
.
import { Component, OnInit } from '@angular/core';
import { pieData } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="chart-container">
<e-accumulation-annotations>
<e-accumulation-annotation content='<div style="border: 1px solid black;background-color:#f5f5f5; padding: 5px 5px 5px 5px">13.5</div>'
region='Chart' coordinateUnits='Pixel' x=150 y=150>
</e-accumulation-annotation>
</e-accumulation-annotations>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='piedata' xName='x' yName='y'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public piedata: Object[];
ngOnInit(): void {
this.piedata = pieData;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Specifies the coordinate units of an annotation either in Pixel
or Point
.
import { Component, OnInit } from '@angular/core';
import { pieData } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="chart-container">
<e-accumulation-annotations>
<e-accumulation-annotation content='<div style="border: 1px solid black;background-color:#f5f5f5; padding: 5px 5px 5px 5px">Jan : 3</div>'
region='Series' coordinateUnits='Point' x='Jan' y=3>
</e-accumulation-annotation>
</e-accumulation-annotations>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='piedata' xName='x' yName='y'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public piedata: Object[];
ngOnInit(): void {
this.piedata = pieData;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The annotations provides the verticalAlignment
or horizontalAlignment
properties.
The verticalAlignment
property can be customized via Top
, Bottom
or Middle
and the horizontalAlignment
property can be customized via Near
, Far
or Center
.
import { Component, OnInit } from '@angular/core';
import { pieData } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="chart-container">
<e-accumulation-annotations>
<e-accumulation-annotation content='<div style="border: 1px solid black;background-color:#f5f5f5; padding: 5px 5px 5px 5px">Jan : 3</div>'
region='Series' coordinateUnits='Point' x='Jan' y=3 verticalAlignment='Top' horizontalAlignment='Near'>
</e-accumulation-annotation>
</e-accumulation-annotations>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='piedata' xName='x' yName='y'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public piedata: Object[];
ngOnInit(): void {
this.piedata = pieData;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);