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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tooltip with formatted value and drilldown with tooltip

Thread ID:

Created:

Updated:

Platform:

Replies:

144732 May 20,2019 11:57 AM UTC May 24,2019 02:55 PM UTC Angular - EJ 2 4
loading
Tags: TreeMap
Samir Modi
Asked On May 20, 2019 11:57 AM UTC

Hi,

Need to know if we can format the tooltip number value to show commas. Currently the examples i see takes an integer to show count, What if I want to show count as 40,000 and not 40000. Can it be done? Also, can I add tooltip to only leaf elements in drilldown?

Samir Modi
Replied On May 20, 2019 01:57 PM UTC

Ok I was able to format and suppress tooltip for parent elements. However, I need to know if we can change the leafLabelSettings labelPath field based on some condition? Right now if my field is blank then the block is not constructed at all. So if I can tweak it say pick name when present else surname when name is blank. Thanks

public leafItemSettings: object = {
labelPath: 'name', //(can we change this based on some condition??)
gap: 5,
fill: '#8ebfe2'
};

Baby Palanidurai [Syncfusion]
Replied On May 21, 2019 05:49 PM UTC

Hi Samir, 

Greetings from Syncfusion. 

Please find the below response for your queries. 

Query 1: Need to know if we can format the tooltip number value to show commas 

We have analyzed your query and your requirement has been achieved by using format and useGroupingSeparator property in treemap options.  

Please find the below code snippet to achieve this requirement, 
<ejs-treemap id='container' #treemap style="display:block;"  [tooltipSettings] = 'tooltipSettings' format='n' useGroupingSeparator="true"
</ejs-treemap> 
 
Query 2: Also, can I add tooltip to only leaf elements in drilldown? 
   
  We can customize the tooltip in the tooltipRendering event. We have prepared a sample with customize the tooltip in the tooltipRendering event. 
 
Code snippet:  
public tooltipRender = (args: ITreeMapTooltipRenderEventArgs) => { 
    args.item['data'].Sales = args.item['weight']; 
    args.treemap.tooltipSettings.format = args.item['groupIndex'] === 0 ? 'Country: ${Continent}<br>Sales: ${Sales}' : 
      'Country: ${Continent}<br>Company: ${Company}<br>Sales: ${Sales}'; 
  }; 
  public tooltipSettings: object = { 
    visible: true, 
    format: 'Country: ${Continent}<br>Company: ${Company}<br>Sales: ${Sales}' 
 }; 
 
<ejs-treemap id='container' #treemap style="display:block;" (tooltipRendering)='tooltipRender($event)' 
        [tooltipSettings] = 'tooltipSettings' > 
   </ejs-treemap> 
 

 
Query 3: I need to know if we can change the leafLabelSettings labelPath field based on some condition? Right now if my field is blank then the block is not constructed at all. So if I can tweak it say pick name when present else surname when name is blank 

We have prepared a sample and having one empty string name and bind that to the labelPath in the leafLabelSettings. When rendering, that empty string block was ignored. For your reference, please find the below screenshots, 

Code snippet:  
Without empty string:  
 

 

With empty string: 
 
 

Did you mean this scenario?. Kindly revert us with details about this requirement which will be helpful in furthermore analysis and provide you the solution sooner. 


Regards, 
Baby.

Samir Modi
Replied On May 23, 2019 06:54 AM UTC

Hi Samir, 

Greetings from Syncfusion. 

Please find the below response for your queries. 

Query 1: Need to know if we can format the tooltip number value to show commas 

We have analyzed your query and your requirement has been achieved by using format and useGroupingSeparator property in treemap options.  

Please find the below code snippet to achieve this requirement, 
<ejs-treemap id='container' #treemap style="display:block;"  [tooltipSettings] = 'tooltipSettings' format='n' useGroupingSeparator="true"
</ejs-treemap> 
 
Query 2: Also, can I add tooltip to only leaf elements in drilldown? 
   
  We can customize the tooltip in the tooltipRendering event. We have prepared a sample with customize the tooltip in the tooltipRendering event. 
 
Code snippet:  
public tooltipRender = (args: ITreeMapTooltipRenderEventArgs) => { 
    args.item['data'].Sales = args.item['weight']; 
    args.treemap.tooltipSettings.format = args.item['groupIndex'] === 0 ? 'Country: ${Continent}<br>Sales: ${Sales}' : 
      'Country: ${Continent}<br>Company: ${Company}<br>Sales: ${Sales}'; 
  }; 
  public tooltipSettings: object = { 
    visible: true, 
    format: 'Country: ${Continent}<br>Company: ${Company}<br>Sales: ${Sales}' 
 }; 
 
<ejs-treemap id='container' #treemap style="display:block;" (tooltipRendering)='tooltipRender($event)' 
        [tooltipSettings] = 'tooltipSettings' > 
   </ejs-treemap> 
 

 
Query 3: I need to know if we can change the leafLabelSettings labelPath field based on some condition? Right now if my field is blank then the block is not constructed at all. So if I can tweak it say pick name when present else surname when name is blank 

We have prepared a sample and having one empty string name and bind that to the labelPath in the leafLabelSettings. When rendering, that empty string block was ignored. For your reference, please find the below screenshots, 

Code snippet:  
Without empty string:  
 

 

With empty string: 
 
 

Did you mean this scenario?. Kindly revert us with details about this requirement which will be helpful in furthermore analysis and provide you the solution sooner. 


Regards, 
Baby.

Thanks for the reply. For query 3) Yes this is the scenario I meant. However, i do not want to ignore that block, instead in your example if company is not present then can we show any other attribute (say Continent or Sales), so that the block is always rendered?

Baby Palanidurai [Syncfusion]
Replied On May 24, 2019 02:55 PM UTC

Hi Samir, 

Thanks for your update. 

We have analyzed your query. There is not possible to construct the block size if any attribute is not present (empty). In this case, we are unable to calculate the block size. And also, we can’t render the block for the sub-field, the sub-field is children for that block. This is the actual behavior. 

Kindly revert us, if you need further assistance. We are always happy in assisting you. 

Regards, 
Baby. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon