Change TooltipFormat

Hi, how do we change the TooltipFormat completely?  We don't want to display any of the default values as we are using the chart with different data types.  Thanks




6 Replies

SB Swetha Babu Syncfusion Team February 1, 2022 07:15 AM UTC

Hi Alex, 

Greetings from Syncfusion. 

We can achieve your requirement of tooltip format by using the Format property in StockChartTooltipSettings.  We can add more information to the tooltip by using this property. However, we have created the simple blazor application to demonstrate the same and it can be downloaded from the below link. 



Code Snippet: 

<SfStockChart> 
    <StockChartCrosshairSettings Enable="true"></StockChartCrosshairSettings> 
    <StockChartTooltipSettings Enable="true" Format="<b>${point.Date} : ${point.Y}</b>" Fill="aqua"> 
    </StockChartTooltipSettings> 
    <StockChartSeriesCollection> 
        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Column" XName="Date" YName="Y"></StockChartSeries> 
    </StockChartSeriesCollection> 
</SfStockChart> 

Screenshot: 

 

Kindly, revert us if you have any concerns. 

Regards, 
Swetha


AL Alex February 1, 2022 02:24 PM UTC

Hi, that hasn't worked, all that's done is added the additional values to the header.  We want to replace High/Low/Open/Close with out own text





SB Swetha Babu Syncfusion Team February 2, 2022 02:53 PM UTC

Hi Alex, 

Greetings from Syncfusion. 

We have considered the reported scenario as a defect and logged the bug report for the same. However, we will include the fix for the reported issue in our weekly patch release which is expected to be scheduled on 15th Feb, 2022. We appreciate your patience until then. Please find the below feedback link to keep track of the reported issue. 

  
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

Regards, 
Swetha


DG Durga Gopalakrishnan Syncfusion Team February 23, 2022 03:17 PM UTC

Hi Alex, 

We are glad to announce that our v19.4.0.53 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor NuGet package version.  


We have added an events TooltipRender and SharedTooltipRender. Now you can customize the tooltip text based on your need. Please check with the below snippet and sample. 

<SfStockChart> 
<StockChartEvents  TooltipRender="@TooltipRender" SharedTooltipRender="@SharedTooltipRender"> 
</StockChartEvents> 
</SfStockChart> 
 
void SharedTooltipRender(SharedTooltipRenderEventArgs args) 
    { 
        //Customize text using args.Text 
    } 
    void TooltipRender(TooltipRenderEventArgs args) 
    { 
        args.Text = "Changed Text"; 
    } 


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 
Durga G 



AL Alex March 7, 2022 06:23 PM UTC

Hi,

How do we get the actual values (high, close, low, open, volume etc...) from the chart?  We just want to label these differently but we obviously need the data values.


Thanks,

Alex



SB Swetha Babu Syncfusion Team March 9, 2022 06:02 AM UTC

Hi Alex, 

Greetings from Syncfusion. 

We can get the Open, Close, low, high values from the Point argument in TooltipRender Event. Please find the below capture screen for your reference. 

Screenshot: 

 

Please let us know whether this meets your requirement. If not, please explain us your requirement which will be helpful for us to analyze further and assist you better. 

Regards, 
Swetha 


Loader.
Up arrow icon