Blazor Chart ToolTip customization

[Sorin]

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

[Kalaimathi Chellaiah]

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. 

Link: https://www.syncfusion.com/feedback/8536/ 

 If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal.  

Regards, 

Kalai. 

 

[Sorin]

Hello Kalai,

Thank you very much for the prompt reply!

I'll follow up through the feedback portal.

Sorin

[Kalaimathi Chellaiah]

Hi Sorin, 

 

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

   

Regards, 

Kalai. 

[Paul Elrich]

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]

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.  

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TooltipTemplate1081349438.zip 

  

Demo Link: https://blazor.syncfusion.com/demos/chart/tooltip-template?theme=bootstrap4 

  

Screenshot: 

 

  

  

Let us know if you have any concerns. 

  

Regards,  

Srihari M   

[Paul Elrich]

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]

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. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TooltipMappingName-923085092.zip 

  

Demo Link: https://blazor.syncfusion.com/demos/chart/category-axis?theme=bootstrap4 

  

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 

[Paul Elrich]

Thank you, that was exactly what I was looking for

[Srihari Muthukaruppan]

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  

 

[ManniAT]

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?

[Srihari Muthukaruppan]

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. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TooltipRender-1720833169.zip 

  

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.  

  

Demo Link: https://blazor.syncfusion.com/demos/chart/tooltip-template?theme=bootstrap4  

   

Screenshot: