1. Home
  2. Forum
  3. Angular - EJ 2
  4. Angular line chart with custom tooltip

Angular line chart with custom tooltip

Hi, I am using line chart in Angular 9. I have following queries.

  • Need to use tooltip template like below

    <div id="tooltipContainer">
    <div>User name: userName</div><div><img [src]="http://user_profile_picture/unserName.png" /></div>
    <div>Last login: lastLoginTime</div>
    </div>

    how can I pass the extra information (bold ) along with the x, y coordinate to the tooltip template ?

  • How can I apply the html style in the above tooltip template?

    For some clarity below is the dataset I am using.

    this.chartData = [
    { x: 10, y: 15 }, // userName: A, profilePicUrl: a.png, lastLogin: 1-1-2020
    { x: 20, y: 22 }, // userName: B, profilePicUrl: b.png, lastLogin: 2-1-2020
    { x: 30, y: 32 }, // userName: C, profilePicUrl: c.png, lastLogin: 3-1-2020
    { x: 40, y: 31 }, // userName: D, profilePicUrl: d.png, lastLogin: 4-1-2020
    ];

I have gone through the angular chart documentation but there are less examples.

Please let know if more information is required to understand the requirement.

6 Replies
DG Durga Gopalakrishnan Syncfusion Team September 7, 2020 01:03 PM UTC

Hi Manish, 
  
We are validating your reported scenario. We will update the status within one business day(8th September, 2020). We appreciate your patience until then. 
  
Regards, 
Durga G 


DG Durga Gopalakrishnan Syncfusion Team September 7, 2020 02:46 PM UTC

Hi Manish, 

We have validated your reported scenario. We suggest you to use tooltipRender event to customize the chart tooltip template based on values provided in data source. We have prepared sample based on your requirement. Please check with the below code snippet and screenshot. 

Code Snippet 
 
public tooltip: Object = { 
        enable: true, 
        template:'<div id="tooltipContainer"></div>', 
    }; 
public tooltipRender(args : ITooltipRenderEventArgs ): void {   
      args.template = '<div id="tooltipContainer" style="background:lightgreen;border:2px solid blue"><div>User name: <b>'+ args.series.dataSource[args.data.pointIndex].userName + '</b></div><div ><img height=30 width=30 src="'+ args.series.dataSource[args.data.pointIndex].profilePicUrl+'" /></div><div>Last login: <b>' + args.series.dataSource[args.data.pointIndex].lastLogin+ '</b></div></div>'; 
    }; 

Screenshot 
 
Sample 

UG Link 

Online Demo 

Kindly revert us, if you have any concerns. 

Regards, 
Durga G 


MK Manish Kumar September 7, 2020 05:31 PM UTC

Thanks Durga,

Can I use <ng-template> in the example that you have shared.

Actually I have to use some angular syntax in the template. As an example for image I have to do this.

<img [src]="imageUrl | imagePipe | async">

Please let me know if more information is required.
    
Thanks

DG Durga Gopalakrishnan Syncfusion Team September 8, 2020 02:17 PM UTC

Hi Manish, 
 
We can use <ng-template> for tag supported properties. As of now, we don’t have tag support for tooltip template. We can pass content for template as string. Please revert us, if you have any concerns.  
 
Regards, 
Durga G 


MK Manish Kumar September 8, 2020 05:55 PM UTC

Thanks Durga

Can you please share the example how to use <ng-template> in the chart tooltip in which we can use the extra information as per my original comment.


DG Durga Gopalakrishnan Syncfusion Team September 9, 2020 03:44 PM UTC

Hi Manish, 
 
We suggest you to pass <ng-template></ng-template> as a string for chart tooltip template as like below code snippet and to customize the template, we suggest you to use tooltipRender event. We have modified sample as per and attached for your reference. Please find the code snippet and screenshot below. 
 
Code Snippet 
 
public tooltip: Object = { 
        enable: true, 
        template: ‘<ng-template #template1></ng-template>’ 
} 
 
Screenshot 
 
 
Sample 
 
If above specified suggestion doesn’t meet your requirement, please revert us. 
 
Regards, 
Durga G 


Loader.
Up arrow icon