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 * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective } from '@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
function App() {
const template = chartTemplate;
function chartTemplate() {
return (<div className='template'>
<div style={{ border: '1px solid black', backgroundColor: '#f5f5f5', padding: '5px 5px 5px 5px' }}>13.5</div>
</div>);
}
;
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationAnnotation]}/>
<AccumulationAnnotationsDirective>
<AccumulationAnnotationDirective content={template} region='Series' coordinateUnits='Point' x='Feb' y={13.5}>
</AccumulationAnnotationDirective>
</AccumulationAnnotationsDirective>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject,AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
function App() {
const template: any = chartTemplate;
function chartTemplate(): any {
return (<div className='template'>
<div style={{ border: '1px solid black', backgroundColor: '#f5f5f5', padding: '5px 5px 5px 5px' }}>13.5</div>
</div>);
};
return <AccumulationChartComponent id='charts' >
<Inject services={[AccumulationAnnotation]} />
<AccumulationAnnotationsDirective>
<AccumulationAnnotationDirective content={template} region='Series' coordinateUnits='Point' x='Feb' y={13.5}>
</AccumulationAnnotationDirective>
</AccumulationAnnotationsDirective>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
*Note: To use annotation feature in accumulation chart, we need to inject AccumulationAnnotation
module into the services
The annotation can be placed with respect to either Series
or Chart
.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective } from '@syncfusion/ej2-react-charts';
import { labelData } from 'datasource.ts';
function App() {
const template = chartTemplate;
function chartTemplate() {
return (<div className='template'>
<div style={{ border: '1px solid black', backgroundColor: '#f5f5f5', padding: '5px 5px 5px 5px' }}>13.5</div>
</div>);
}
;
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationAnnotation]}/>
<AccumulationAnnotationsDirective>
<AccumulationAnnotationDirective content={template} region='Chart' coordinateUnits='Pixel' x={550} y={150}>
</AccumulationAnnotationDirective>
</AccumulationAnnotationsDirective>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={labelData} xName='x' yName='y'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject,AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective}
from'@syncfusion/ej2-react-charts';
import { labelData } from 'datasource.ts';
function App() {
const template:any=chartTemplate;
function chartTemplate(): any {
return (<div className='template'>
<div style={{ border: '1px solid black' ,backgroundColor:'#f5f5f5', padding: '5px 5px 5px 5px'}}>13.5</div>
</div>);
};
return <AccumulationChartComponent id='charts' >
<Inject services={ [AccumulationAnnotation] } />
<AccumulationAnnotationsDirective >
<AccumulationAnnotationDirective content={ template } region = 'Chart' coordinateUnits= 'Pixel' x= { 550} y= { 150}>
</AccumulationAnnotationDirective>
</AccumulationAnnotationsDirective>
<AccumulationSeriesCollectionDirective >
<AccumulationSeriesDirective dataSource ={ labelData } xName = 'x' yName= 'y' >
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Specifies the coordinate units of an annotation either in Pixel
or Point
.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective } from '@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
function App() {
const template = chartTemplate;
function chartTemplate() {
return (<div className='template'>
<div style={{ border: '1px solid black', backgroundColor: '#f5f5f5', padding: '5px 5px 5px 5px' }}>13.5</div>
</div>);
}
;
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationAnnotation]}/>
<AccumulationAnnotationsDirective>
<AccumulationAnnotationDirective content={template} region='Series' coordinateUnits='Point' x='Feb' y={13.5}>
</AccumulationAnnotationDirective>
</AccumulationAnnotationsDirective>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject,AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
function App() {
const template:any=chartTemplate;
function chartTemplate(): any {
return (<div className='template'>
<div style={{ border: '1px solid black' ,backgroundColor:'#f5f5f5', padding: '5px 5px 5px 5px'}}>13.5</div>
</div>);
};
return <AccumulationChartComponent id='charts' >
<Inject services={[AccumulationAnnotation]}/>
<AccumulationAnnotationsDirective>
<AccumulationAnnotationDirective content={ template} region='Series' coordinateUnits='Point' x='Feb' y={13.5}>
</AccumulationAnnotationDirective>
</AccumulationAnnotationsDirective>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource ={accData} xName='x' yName='y'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
The annotations can be moved vertically and horizontally from its default position by using verticalAlignment
or horizontalAlignment
properties. The verticalAlignment property takes value as Top
, Bottom
or Middle
and the
horizontalAlignment property takes value as Near
, Far
or Center
.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective } from '@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
function App() {
const template = chartTemplate;
function chartTemplate() {
return (<div className='template'>
<div style={{ border: '1px solid black', backgroundColor: '#f5f5f5', padding: '5px 5px 5px 5px' }}>13.5</div>
</div>);
}
;
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationAnnotation]}/>
<AccumulationAnnotationsDirective>
<AccumulationAnnotationDirective content={template} region='Series' coordinateUnits='Point' x='Feb' y={13.5} verticalAlignment='Top' horizontalAlignment='Near'>
</AccumulationAnnotationDirective>
</AccumulationAnnotationsDirective>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject,AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
function App() {
const template:any=chartTemplate;
function chartTemplate(): any {
return (<div className='template'>
<div style={{ border: '1px solid black' ,backgroundColor:'#f5f5f5', padding: '5px 5px 5px 5px'}}>13.5</div>
</div>);
};
return <AccumulationChartComponent id='charts' >
<Inject services={[AccumulationAnnotation]}/>
<AccumulationAnnotationsDirective>
<AccumulationAnnotationDirective content={ template} region='Series' coordinateUnits='Point' x='Feb' y={13.5} verticalAlignment='Top' horizontalAlignment='Near'>
</AccumulationAnnotationDirective>
</AccumulationAnnotationsDirective>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource ={accData} xName='x' yName='y'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));