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
SIGN IN To post a reply.
13 Replies
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
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
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.
Screenshot:
Query #3: 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.
We can achieve your requirement using tooltipRender event in the chart. Based on that we have prepared a sample for your reference. Please find the sample, code snippet and screenshot below.
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>
// add your additional code here
</SfChart>
@code{
public class SalesInfo
{
public DateTime Month { get; set; }
public double SalesValue { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public double Age { get; set; }
}
public List<SalesInfo> Sales = new List<SalesInfo>
{
new SalesInfo { Month = new DateTime(2005, 01, 01), SalesValue = 35, FirstName = "John", LastName= "Smith", Age=50 },
new SalesInfo { Month = new DateTime(2005, 02, 01), SalesValue = 28, FirstName = "Will", LastName= "Smith", Age=50 },
new SalesInfo { Month = new DateTime(2005, 03, 01), SalesValue = 34, FirstName = "David", LastName= "Williams", Age=50 },
new SalesInfo { Month = new DateTime(2005, 04, 01), SalesValue = 32, FirstName = "Snow", LastName= "White", Age=50 },
new SalesInfo { Month = new DateTime(2005, 05, 01), SalesValue = 40, FirstName = "Simon", LastName= "Cowell", Age=50 },
new SalesInfo { Month = new DateTime(2005, 06, 01), SalesValue = 32, FirstName = "John", LastName= "Smith", Age=50 },
new SalesInfo { Month = new DateTime(2005, 07, 01), SalesValue = 35, FirstName = "Lionel", LastName= "Messi", Age=50 }
};
public void TooltipEvent(TooltipRenderEventArgs args)
{
var point = Sales[Convert.ToInt32(args.Data.PointIndex)];
args.Text = args.Text + "<br> FirstName : " + point.FirstName + "<br> LastName : " + point.LastName + "<br> Age : " + point.Age;
// Here you can customize your code
}
}
// add your additional code here
|
Screenshot:
Let us know if you have any concerns.
Regards,
Srihari M
SIGN IN To post a reply.
