1. Home
  2. Forum
  3. Blazor
  4. Change the display format of a number in a tooltip

Change the display format of a number in a tooltip

Hello

I have the start of a customized tooltip:

<ChartTooltipSettings Enable="true" Header="Brief Value" Format="<b>${point.x} : ${point.y}</b>"></ChartTooltipSettings>

In my case point.y is displaying a number: 80000

I would like to display this formatted as say 80,000 or $80,0000.

Is this possible?

5 Replies 1 reply marked as answer
SM Srihari Muthukaruppan Syncfusion Team November 19, 2020 06:19 PM UTC

Hi Ditchford, 
 
We have analysed your query. From that, we can achieve your requirement by using UseGroupingSeparator property in the chart. We have also prepared a sample for your reference. Please find the sample, code snippet and screenshot below.  
 
  
Code Snippet:  
// add your additional code here  
 
<SfChart @ref="@ChartObj" UseGroupingSeparator="true" Title="Profit Comparison of A and B"> 
    // add your additional code here 
</SfChart> 
  
Screenshot: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 


Marked as answer
DI Ditchford November 24, 2020 10:50 PM UTC

Hey

Yep thanks.  That works.

DG Durga Gopalakrishnan Syncfusion Team November 25, 2020 06:44 AM UTC

Hi Ditchford, 
  
Most welcome. Please get back to us if you need any further assistance. 
  
Regards, 
Durga G 


SD Steve DeLollis November 14, 2022 10:34 PM UTC

I'm doing a bubble chart and I'd really like to see a comma in the point.size value when displayed in the tooltip.

Below, point.size may be something like 16489. I've tried a few things but no luck on getting a comma formatted number.

Is it possible?

<ChartTooltipSettings Header="<b>${point.tooltip}</b>" EnableMarker="false" Enable="true" Format="Volatility <b>${point.x}</b> <br/>Return <b>${point.y}</b><br/>AUM <b>${point.size} thousand</b>"></ChartTooltipSettings>


Thanks


DG Durga Gopalakrishnan Syncfusion Team December 1, 2022 02:45 PM UTC

Steve,


We suggest you to use TooltipRender event to customize the tooltip text based on your requirement. Please check with the below snippet and documentation link.


<SfChart>

    <ChartEvents TooltipRender="TooltipEvent"></ChartEvents>

</SfChart>

@code {

public void TooltipEvent(TooltipRenderEventArgs args)

    {

        // Here, you can customize your code.

    }

}


https://blazor.syncfusion.com/documentation/chart/events#tooltiprender


Please let us know if you have any concerns.


Regards,

Durga Gopalakrishnan.


Loader.
Up arrow icon