Event Annotation
Annotations are used to mark important news or events that can be attached to a specific data point on FinancialChart. Users can hover over the event to display the full annotation text.
There are Circle, Ellipse, Image, Line, Polygon, Rectangle, Square and Text annotations that can be used to mark an event.
<wj-financial-chart [header]="header"
[itemsSource]="data"
chart-type="Line"
bindingX="date">
<wj-financial-chart-series name="Close" binding="close"></wj-financial-chart-series>
<wj-flex-chart-annotation-layer>
<wj-flex-chart-annotation-rectangle content="E" [height]="30" [width]="40" [pointIndex]="16" position="Center" attachment="DataIndex"
tooltip="FACEBOOK INC Files SEC form 8-K, Results of Operations and Financial Condition">
</wj-flex-chart-annotation-rectangle>
<wj-flex-chart-annotation-ellipse content="E" [height]="30" [width]="40" [pointIndex]="17" position="Center" attachment="DataIndex"
tooltip="FACEBOOK INC Files SEC form 10-K, Annual Report">
</wj-flex-chart-annotation-ellipse>
<wj-flex-chart-annotation-circle content="E" [radius]="20" [pointIndex]="49" position="Center" attachment="DataIndex"
tooltip="Coverage initiated on Facebook by Brean Capital">
</wj-flex-chart-annotation-circle>
<wj-flex-chart-annotation-square content="E" [length]="30" [width]="40" [pointIndex]="75" position="Center" attachment="DataIndex"
tooltip="FACEBOOK INC Files SEC form 8-K, Results of Operations and Financial Condition">
</wj-flex-chart-annotation-square>
</wj-flex-chart-annotation-layer>
</wj-financial-chart>
import { Component, ViewChild, Inject} from '@angular/core';
import { DataSvc } from './../services/DataSvc';
//EventAnnotation sample component
@Component({
selector: 'event-annotation-cmp',
templateUrl: 'src/components/EventAnnotationCmp.html'
})
export class EventAnnotationCmp {
dataSvc: DataSvc;
data: any[];
header: string;
constructor( @Inject(DataSvc) dataSvc: DataSvc) {
this.data = [];
this.dataSvc = dataSvc;
this.setDataSource();
this.header = 'Facebook, Inc. (FB)';
}
private setDataSource() {
this.dataSvc.getData().subscribe(data => {
this.data = data;
});
}
}
Result (live):