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. Image for the cookie policy date

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

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.


Please reply ASAP.

1 Reply

DD Dharanidharan Dharmasivam Syncfusion Team March 1, 2019 04:34 AM

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 { 
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. 
  <ejs-chart (load)='load($event)'> 
           Initializing the annotation 
                <ng-template #content></ng-template> 
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++){ 
        x: new Date(dataSource[i].y), 
        y: dataSource[i].x + highInterval , 
        coordinateUnits: 'Point', 
        content : '<div id="chart_annotation">High</div>' 
     Other configurations 
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.  

Live Chat Icon For mobile
Up arrow icon