Sparkline in Grid example with tooltips?

[Scott Price]

Hello,

Is it possible to get tooltips to work when embedding sparklines in a grid as per the example here: https://ej2.syncfusion.com/angular/demos/#/material/sparkline/sparkline-grid ? Simply adding the tooltipSettings property doesn't seem to work.

Thanks

[Baskaran S]

Hi Scott, 

  

We can enable the tooltip using the "visible" property of "tooltipSettings" in the Sparkline. Please find the sample link and code snippet for your reference below. 

  

Sample: https://stackblitz.com/edit/angular-rmt1t6-9s4srz?file=app.component.ts 

  

Code Snippet: 

 

File: app.component.ts 

  

Import and Inject SparklineTooltip  

import { Component, OnInit } from '@angular/core'; 

import { Sparkline, SparklineTooltip } from '@syncfusion/ej2-charts'; 

import { orderdata } from './spark-data'; 

Sparkline.Inject(SparklineTooltip); 

 

  

Visible tooltip 

let line: Sparkline = new Sparkline({ 

          height: '30px', 

          width: '90%', 

          lineWidth: 2, 

          valueType: 'Numeric', 

          fill: '#3C78EF', 

          tooltipSettings: { 

            visible: true 

          }, 

          dataSource: this.getSparkData('line', i) 

        }); 

        line.appendTo('#spkline' + i); 

 

  

When there is insufficient space for tooltip in Sparkline, it is getting cropped. We have considered this as a bug and logged a defect report. This fix will be available in our weekly patch release which is scheduled to be rolled out on 8th June 2021. We appreciate your patience until then. You can keep track of the bug from the below feedback link. 

  

Feedback Link: https://www.syncfusion.com/feedback/25618 

  

Please let us know if you need further assistance. 

  

Regards, 

Baskaran S 

[Thiyagu Subramani]

Hi Scott, 

Sorry for the inconvenience.  

We have validated your query and the tooltip is hidden inside the grid cell due to specifying overflow property as hidden for the grid cell and content elements. When we specify overflow property as hidden and if there is no enough space for the tooltip, the overflow element(tooltip) gets hidden inside the grid cell.  

But for the grid component, it is necessary to set overflow as hidden, only then all the grid features will work properly. So it is not possible to remove the overflow property and hence we suggest you to set the rowHeight property to show the sparkline tooltip in the grid cell. Please refer the below code snippet and the sample for your reference.  

 <ejs-grid rowHeight=120 . . . . > 

</ejs-grid> 

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowheight 

Sample : https://stackblitz.com/edit/angular-rmt1t6-4rajxv?file=app.component.html 

Please get back to us if you have any other queries.  

Regards,  

Thiyagu S 

[Scott Price]

Thank you. 

[Duraimurugan Vedagiri]

Hi Scott,

Thanks for your update.

Please let us know if you need any further assistance.

Regards,
Durai Murugan V