How to access the point values when you hover over the graph line?

Thread ID:	Created:	Updated:	Platform:	Replies:
143027	Mar 1,2019 03:34 AM UTC	Mar 1,2019 09:34 AM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: Chart

Aparna Pyla

Asked On March 1, 2019 03:34 AM UTC

Two questions :

1) How to access the current point value in the component when you hover over the line in graph? Is there any pointChanged event?

2) I was trying add a label on the top and bottom of y axis representing the max and min values using annotation but it does not show the label. I even added annotation service in the module providers section.

https://stackblitz.com/edit/angular-rq6cr4-2e4rrn?file=line.component.ts

Please reply ASAP.

Reply | Reply with quote

Dharanidharan Dharmasivam [Syncfusion]

Replied On March 1, 2019 09:34 AM UTC

Hi Aparna,

Query #1: How to access the current point value in the component when you hover over the line in graph?

Yes, we are having pointMove event, using which can access the current point. We have shown the alert box, you can change this based on your scenario.

<ejs-chart (pointMove)='pointMove($event)'></ejs-chart>

public pointMove(args: IPointEventArgs): void {

alert(args.point.index)

}

Query #2: Label in top and bottom using annotation

We have modified the given sample based on your scenario. We have achieved your scenario by adding annotations dynamically in the load event of chart. For this you need to initialize the annotation as highlighted, so that only the annotation module will be injected in our source level. Find the code snippet below to achieve this.

[line.html]

<ejs-chart (load)='load($event)'>

Initializing the annotation

<e-annotations>

<e-annotation>

<ng-template #content></ng-template>

</e-annotation>

</e-annotations>

</ejs-chart>

[line.component.ts]

public load(args: ILoadedEventArgs): void {

let highInterval: number = 2;

//Other configurations

let annotationCollection: Object = [];

let dataSource: Object = args.chart.series[0].dataSource;

//Assigning annotation with empty array

args.chart.annotations = [];

for(let i=0; i< dataSource.length;i++){

args.chart.annotations.push({

x: new Date(dataSource[i].y),

y: dataSource[i].x + highInterval ,

coordinateUnits: 'Point',

region:'Series',

content : '<div id="chart_annotation">High</div>'

})

Other configurations

};

}

Sample: https://stackblitz.com/edit/angular-rq6cr4-nboboh?file=line.component.ts

Screenshot:

Here for both high and low values, we have achieved through annotation. You can also achieve using data label either for high/low values and for the other can be achieved using annotation.

Thanks,

Dharani.

Reply | Reply with quote

How to access the point values when you hover over the graph line?

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US