We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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.

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 
     
    }; 
  } 
 
 
 
  
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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon