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

Blazor Chart ToolTip customization

Hello, 

I'm working with housing data (as in property listings) using the Syncfusion.EJ2.Blazor (latest version 17.2.0.46-beta)
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,
Sorin

13 Replies

KC Kalaimathi Chellaiah Syncfusion Team August 29, 2019 01:30 AM

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.  
Regards, 
Kalai. 
 



SO Sorin August 29, 2019 02:44 AM

Hello Kalai,

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

Sorin


KC Kalaimathi Chellaiah Syncfusion Team August 29, 2019 10:12 PM

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



PE Paul Elrich June 17, 2020 01:29 PM

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)


SM Srihari Muthukaruppan Syncfusion Team June 18, 2020 09:33 AM

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.  
  
  
  
Screenshot: 
 
  
  
Let us know if you have any concerns. 
  
Regards,  
Srihari M   



PE Paul Elrich June 23, 2020 07:54 AM

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?


SM Srihari Muthukaruppan Syncfusion Team June 23, 2020 07:52 PM

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> 
        <ChartSeriesCollection> 
            <ChartSeries DataSource="@ChartData" TooltipMappingName="Country" Name="Users" XName="XValue" YName="YValue" Width="2" Type="ChartSeriesType.Bar"> 
            </ChartSeries> 
        </ChartSeriesCollection> 
    </SfChart> 
  
@code{ 
    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" } 
     }; 
} 

Screenshot:
 
 
  
Let us know if you need further assistance. 
  
Regards, 
Srihari M 



PE Paul Elrich June 24, 2020 09:00 AM

Thank you, that was exactly what I was looking for


SM Srihari Muthukaruppan Syncfusion Team June 24, 2020 09:05 PM

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




MA ManniAT June 16, 2021 07:40 AM

Hi,

like the initial post I'm behind a solution wehre I want to display more information on the ToolTip.
You showed a solution where I can pass(last not least text) via ToolTipMappingName.

But assume I pass a DateTime and want to format it in the tooltip like theData.ToString("dddd HH:mm") - how can I do this.

Last not least - what like in the initial post - I want to display details about the Element in the tooltip?
Imagine a runner high-score where I show the pace / rank / speed of several competitors on the diagram.
In the ToolTip I want to see age, gender, country (flag), and so forth.

In "normal blazor  component" I would do something like <span>@Member.Firstname @Member.Lastname<br/> @Member.Age...
So last not least the thing asked by Sorin could be achieved.

I guess this is not possible with the ToolTipMappingName trick, or am I just missing somehting?



SM Srihari Muthukaruppan Syncfusion Team June 17, 2021 09:29 AM

Hi ManniAT, 
  
Please find the response for chart related queries. 
  
Query #1: But assume I pass a DateTime and want to format it in the tooltip like theData.ToString("dddd HH:mm") 
  
We can achieve your requirement using labelFormat property in the axis of the chart. Please find the sample, code snippet and screenshot below for your reference. 
  
  
Code Snippet: 
// add your additional code here 
  
<SfChart> 
    <ChartEvents TooltipRender="TooltipEvent"></ChartEvents> 
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="dddd HH:mm"> 
</ChartPrimaryXAxis> 
    <ChartSeriesCollection> 
        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column"> 
        </ChartSeries> 
    </ChartSeriesCollection> 
    <ChartTooltipSettings Enable="true"></ChartTooltipSettings> 
</SfChart> 
  
// add your additional code here 
  
  
Screenshot: 
 
  
Query #2: what like in the initial post - I want to display details about the Element in the tooltip? 
  
Based on your requirement we have attached a demo sample for tooltip template. Please find the link and screenshot below for your reference.  
  
   
Screenshot: