On Mouse hover of curve, or major minor gridline ,x , y axis line i have to display the below message

[VKarthikeyan]

Help me by sharing the sample angular 8 code to get the below Flow rate values displaying on mouse hover of curve, x axis, y axis , minor and major grid lines throughout the box. also explain how to bind the Flow rate values on mouse hover to grid lines , x and y axis, curve using async/await from api in angular 8.

On mouse hover of curve: Flow rate values displaying

On mouse hover of x axis scale : Flow rate values displaying

On mouse hover of grid lines : Flow rate values displaying

[Durga Gopalakrishnan]

Hi Karthikeyan, 

 

We have analyzed your queries. Please check with the below suggestions. 

 

#1 : Flow rate values displaying on mouse hover of curve, x axis, y axis , minor and major grid lines throughout the box. 

 

We suggest you to enable crosshair and tooltip for chart. This property will display y values of all series. You can customize the tooltip text using tooltipRender event. Using this event , we have modified the header text of tooltip in sample. Please check with the below code snippet and sample. 

 

app.component.ts 

 

import { ITooltipRenderEventArgs } from '@syncfusion/ej2-angular-charts'; 

export class AppComponent implements OnInit{ 

public tooltip: Object = { 

    enable: true, 

    shared: true  

  }; 

public crosshair: Object = {  

    enable: true,  

    lineType: 'None'  

}; 

// event to customize tooltip text 

public tooltipRender(args: ITooltipRenderEventArgs): void {  

     args.headerText = "X : " +args.headerText; 

}; 

} 

 

app.component.html 

 

<ejs-chart #chart id='chartcontainer' (tooltipRender)='tooltipRender($event)'> 

</ejs-chart> 

 

 

Screenshot 

 

 

 

#2 : How to bind the Flow rate values on mouse hover to grid lines , x and y axis, curve using async/await from api in angular 8 

 

By default, when you use async and await method, data for chart will be appended only when data is available in that method. The tooltip value will be calculated based on provided y values for chart series points.  

 

Code Snippet 

 

app.component.ts 

 

export class AppComponent implements OnInit{   

   async ngOnInit(): Promise<any> { 

      let chartData = await ChartDataService.prototype.getTrendlineData(); 

      this.series1 = chartData["series1"]; 

      //… 

  } 

} 

 

Sample 

https://stackblitz.com/edit/angular-ueq6vg-svzar3?file=app.component.ts 

Please revert us, if you have any concerns. 

Regards, 

Durga G