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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Blazor Chart ToolTip customization

Thread ID:





147008 Aug 28,2019 12:47 PM UTC Jun 25,2020 05:05 AM UTC Blazor 9
Tags: Charts
Asked On August 28, 2019 12:49 PM UTC


I'm working with housing data (as in property listings) using the Syncfusion.EJ2.Blazor (latest version
I was able to succeed in plotting basic values on the Scatter Plot (see below)

For the next step, I'm interested in displaying more information than just the X/Y value for the point.
For example, I want to show the primary picture, and list other data, like number of bedrooms, associated with that property.

In the documentation, it says "Any HTML elements can be displayed in the tooltip by using the template property of the tooltip."
However I'm struggling to figure out how to use that property.
Can anyone help to provide an example how to use this property to display extra information in the tooltip?

In doing some research, I found that general tooltips for buttons have many configuration options (https://www.syncfusion.com/blazor-components/blazor-tooltip), however it doesn't seem to apply directly to the chart tooltip.
Also in the JS documentation there is a good example of this: http://js.syncfusion.com/demos/web/?_ga=2.232503007.1377838673.1566815844-1970426639.1558915202#!/azure/chart/chartcustomization/tooltiptemplate , however since I'm using Blazor, the example does not really carry over.

Thank you,

Kalaimathi Chellaiah [Syncfusion]
Replied On August 29, 2019 09:30 AM UTC

Hi Sorin, 
Greetings from Syncfusion. 
We are currently working on Support for Tooltip Template and the support will be available in the volume 3 main release. We are closing this incident now and you can track the feature status through our feedback portal below and the UG for this will get updated. 
 If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal.  

Replied On August 29, 2019 10:44 AM UTC

Hello Kalai,

Thank you very much for the prompt reply!
I'll follow up through the feedback portal.


Kalaimathi Chellaiah [Syncfusion]
Replied On August 30, 2019 06:12 AM UTC

Hi Sorin, 
Most welcome. Kindly get in touch with us, if you require further assistance. We are always happy in assisting you.   

Paul Elrich
Replied On June 17, 2020 09:29 PM UTC

I see that this issue has been marked as resolved. I still can't find any documentation about displaying the data not used in plotting points on a chart tooltip.

(ie use x & y values for plotting points, and display z values in tooltips)

Srihari Muthukaruppan [Syncfusion]
Replied On June 18, 2020 05:33 PM UTC

Hi Paul, 
We have analyzed your query. From that, we would like to let you know that our latest blazor package version is 18.1.57. Based on your requirement we have prepared a sample for your reference. We have also attached the demo sample link for your reference. Please find the sample and screenshot.  
Let us know if you have any concerns. 
Srihari M   

Paul Elrich
Replied On June 23, 2020 03:54 PM UTC

Thanks for the response, but that example is still only using the x and y values used in the chart. 

Say I'm using a dataset that is a list of objects with 3 properties, two are used in plotting the chart, and the other is a short description string. How could I access this string in the tooltip?

Srihari Muthukaruppan [Syncfusion]
Replied On June 24, 2020 03:52 AM UTC

Hi Paul, 
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using tooltipMappingName property of the chart. Based on your requirement we have prepared a sample for your reference. 
Code Snippet: 
<SfChart > 
// add additional code here 
        <ChartTooltipSettings Enable="true" Format="${point.tooltip}"></ChartTooltipSettings> 
            <ChartSeries DataSource="@ChartData" TooltipMappingName="Country" Name="Users" XName="XValue" YName="YValue" Width="2" Type="ChartSeriesType.Bar"> 
    public class CategoryData 
        public string XValue { get; set; } 
        public double YValue { get; set; } 
        public string Country { get; set; } 
    public List<CategoryData> ChartData = new List<CategoryData> 
        new CategoryData { XValue = "Germany", YValue = 72, Country = "GER: 72" }, 
        new CategoryData { XValue = "Russia", YValue = 103.1, Country = "RUS: 103.1" }, 
        new CategoryData { XValue = "Brazil", YValue = 139.1, Country = "BRZ: 139.1" }, 
        new CategoryData { XValue = "India", YValue = 462.1, Country = "IND: 462.1" }, 
        new CategoryData { XValue = "China", YValue = 721.4, Country = "CHN: 721.4" }, 
        new CategoryData { XValue = "United States<br>Of America", YValue = 286.9, Country = "USA: 286.9" }, 
        new CategoryData { XValue = "Great Britain", YValue = 115.1, Country = "GBR: 115.1" }, 
        new CategoryData { XValue = "Nigeria", YValue = 97.2, Country = "NGR: 97.2" } 

Let us know if you need further assistance. 
Srihari M 

Paul Elrich
Replied On June 24, 2020 05:00 PM UTC

Thank you, that was exactly what I was looking for

Srihari Muthukaruppan [Syncfusion]
Replied On June 25, 2020 05:05 AM UTC

Hi Paul 
Most welcome. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you.    
Srihari M  


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