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

[Aparna Pyla]

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]

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.