Annotations are used to mark the specific area of interest in the chart area with texts, shapes or images.
You can add annotations to the chart by using the annotations option. By using the
content option of annotation object,
you can specify the id of the element that needs to be displayed in the chart area.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartAnnotation, AnnotationsDirective, AnnotationDirective, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Category', title: 'Countries' };
this.primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
this.border = { width: 2, color: 'grey' };
this.animation = { enable: true, duration: 1200, delay: 100 };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, ChartAnnotation]}/>
<AnnotationsDirective>
<AnnotationDirective content='70 Gold Medals' region='Series' coordinateUnits='Point' x='Japan' y={75}>
</AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' name='Gold' border={this.border} animation={this.animation} type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartAnnotation, AnnotationsDirective, AnnotationDirective,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
public primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
public border = { width: 2, color: 'grey' };
public animation = { enable: true, duration: 1200, delay: 100 };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, ChartAnnotation]} />
<AnnotationsDirective>
<AnnotationDirective content='70 Gold Medals' region='Series' coordinateUnits='Point' x='Japan' y={75}>
</AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' name='Gold'
border={this.border}
animation={this.animation} type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Note: To use annotation feature in chart, we need to inject ChartAnnotation module into the services.
Annotations can be placed either with respect to Series or Chart. by default, it will placed with respect to Chart.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartAnnotation, AnnotationsDirective, AnnotationDirective, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Category', title: 'Countries' };
this.primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
this.border = { width: 2, color: 'grey' };
this.animation = { enable: true, duration: 1200, delay: 100 };
this.template = this.chartTemplate;
}
chartTemplate() {
return (<div className='template'>
<div>Highest Medal Count</div>
</div>);
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, ChartAnnotation]}/>
<AnnotationsDirective>
<AnnotationDirective content={this.template} region='Series' coordinateUnits='Point' x='Japan' y={75}>
</AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' name='Gold' border={this.border} animation={this.animation} type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartAnnotation, AnnotationsDirective, AnnotationDirective,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
public primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
public border = { width: 2, color: 'grey' };
public animation = { enable: true, duration: 1200, delay: 100 };
public template: any = this.chartTemplate;
public chartTemplate(): any {
return (<div className='template'>
<div>Highest Medal Count</div>
</div>);
}
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, ChartAnnotation]} />
<AnnotationsDirective>
<AnnotationDirective content={this.template} region='Series' coordinateUnits='Point' x='Japan' y={75}>
</AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' name='Gold'
border={this.border}
animation={this.animation} type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Specified the coordinates units of the annotation either Pixel or Point.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartAnnotation, AnnotationsDirective, AnnotationDirective, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Category', title: 'Countries' };
this.primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
this.border = { width: 2, color: 'grey' };
this.animation = { enable: true, duration: 1200, delay: 100 };
this.template = this.chartTemplate;
}
chartTemplate() {
return (<div className='charttemplate'>
<div> Annotation In Pixel </div>
</div>);
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, ChartAnnotation]}/>
<AnnotationsDirective>
<AnnotationDirective content={this.template} coordinateUnits='Pixel' x={150} y={50}>
</AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' name='Gold' border={this.border} animation={this.animation} type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel,ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartAnnotation, AnnotationsDirective, AnnotationDirective,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
public primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
public border = { width: 2, color: 'grey' };
public animation = { enable: true, duration: 1200, delay: 100 };
public template: any = this.chartTemplate;
public chartTemplate(): any {
return (<div className='charttemplate'>
<div> Annotation In Pixel </div>
</div>);
}
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, ChartAnnotation]} />
<AnnotationsDirective>
<AnnotationDirective content={this.template}
coordinateUnits='Pixel' x={150} y={50}>
</AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' name='Gold'
border={this.border}
animation={this.animation} type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));