Tooltip with formatted value and drilldown with tooltip

[Samir Modi]

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]

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]

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> 

 

Sample link: https://stackblitz.com/edit/angular-thkzdi-ln2nxs?file=app.component.ts 

 

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]

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> 

 

Sample link: https://stackblitz.com/edit/angular-thkzdi-ln2nxs?file=app.component.ts 

 

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]

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.