Hi!
It's possible to format or create a template for ChartTooltipBehavior?
Example:
TooltipTemplate="{StaticResource toolTipTemplate1}"
<telerik:RadCartesianChart.Resources>
<ResourceDictionary>
<DataTemplate x:Key="toolTipTemplate1">
<VerticalStackLayout>
<HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Fill" Spacing="0" Padding="3" Margin="0">
<Label Text="{Binding Item.X, StringFormat='{0:F2}'}" TextColor="White"/>
<Label Text=" "/>
<Label Text="{Binding Path=BindingContext.AmplitudeUnit, Source={x:Reference graphicPage}}" TextColor="White"/>
<Label Text=" | "/>
<Label Text="{Binding Item.Y, StringFormat='{0:F2}'}" TextColor="White"/>
<Label Text=" "/>
<Label Text="{Binding Path=BindingContext.FrequencyUnit, Source={x:Reference graphicPage}}" TextColor="White"/>
</HorizontalStackLayout>
</VerticalStackLayout>
</DataTemplate>
</ResourceDictionary>
</telerik:RadCartesianChart.Resources>
1 Answer, 1 is accepted
Hello Rodrigo,
We have a feature request for providing customization options for the Chart tooltip, you can review it in the Telerik .NET MAUI feedback portal at the link below:
Chart: Options to customize and style the tooltip
If you follow the item, you'll receive email notifications on status changes.
For the time being, you can customize the tooltip through a native implementation on different platforms. Can you please send me the target platforms you need, so I can give more precise instructions?
I look forward to your reply.
Regards,
Yana
Progress Telerik
Rank 1
Iron
Iron
Iron
Hi Yana!
I'm using for Android and iOS.
Tks!
Regards,
Rodrigo.
Hi Rodrigo,
First, please keep in mind with the native approach you wouldn't be able to bind properties from the page ViewModel - you have access to the data points and their data.
Here is the approach - subscribe to the HandlerChanged event and use the native Chart to customize the tooltip on Android and iOS:
private void chart_HandlerChanged(object sender, EventArgs e)
{
var platformView = this.chart.Handler.PlatformView;
#if ANDROID
var platformChart = (Com.Telerik.Widget.Chart.Visualization.CartesianChart.RadCartesianChartView)platformView;
Com.Telerik.Widget.Chart.Visualization.Behaviors.ChartTooltipBehavior tooltip = (Com.Telerik.Widget.Chart.Visualization.Behaviors.ChartTooltipBehavior)platformChart.Behaviors.Get(0);
tooltip.SetContentAdapter(new Platforms.Android.MyTooltipContentAdapter());
#elif IOS
var platformiOSChart = (Telerik.Maui.Controls.Compatibility.ChartRenderer.iOS.TKExtendedChart)platformView;
platformiOSChart.Trackball.Tooltip.Style.Fill = new TelerikUI.TKSolidFill()
{
Color = new UIKit.UIColor(red: 1.00f, green: 0.75f, blue: 0.87f, alpha: 1.00f),
ShadowBlur = 0.3f,
ShadowColor = new UIKit.UIColor(red: 1.00f, green: 0.75f, blue: 0.87f, alpha: 1.00f),
Alpha = 0.9f,
};
platformiOSChart.Trackball.Tooltip.Style.TextColor = UIKit.UIColor.DarkGray;
platformiOSChart.Delegate = new Platforms.iOS.MyChartDelegate(this.chart);
#endif
}
For Android define a MyTooltipContentAdapter class inside the Platforms/Android folder:
public class MyTooltipContentAdapter : Java.Lang.Object, Com.Telerik.Android.Primitives.Widget.Tooltip.Contracts.ITooltipContentAdapter
{
public bool ApplyDefaultStyles { get; set; }
public Com.Telerik.Android.Common.IFunction CategoryToStringConverter { get; set; }
public Com.Telerik.Android.Common.IFunction ValueToStringConverter { get; set; }
public global::Android.Views.View GetView(Java.Lang.Object[] p0)
{
global::Android.Content.Context context = MauiApp2.MainApplication.Context;
global::Android.Widget.LinearLayout linearLayout = new global::Android.Widget.LinearLayout(context);
linearLayout.Orientation = global::Android.Widget.Orientation.Vertical;
linearLayout.SetBackgroundColor(global::Android.Graphics.Color.LightSalmon);
linearLayout.SetPadding(10, 10, 10, 10);
foreach (Com.Telerik.Widget.Chart.Engine.DataPoints.CategoricalDataPoint dataPoint in p0)
{
global::Android.Widget.TextView textView = new global::Android.Widget.TextView(context);
textView.Text = string.Format("Value of {0} is $ {1}", dataPoint.Category, dataPoint.Value);
linearLayout.AddView(textView);
}
return linearLayout;
}
}
For iOS define MyChartDelegate inside Platforms/iOS folder:
public class MyChartDelegate : Telerik.Maui.Controls.Compatibility.ChartRenderer.iOS.CartesianChartDelegate
{
public MyChartDelegate(RadCartesianChart chart) : base(chart)
{
}
public override void TrackballDidTrackSelection(TKChart chart, TKChartSelectionInfo[] selection)
{
StringBuilder str = new StringBuilder();
bool first = true;
foreach (TelerikUI.TKChartSelectionInfo info in selection)
{
var point = info.DataPoint as TelerikUI.TKChartDataPoint;
if (!first)
{
str.Append("\n");
}
else
{
first = !first;
}
str.Append(string.Format("Value of {0} is $ {1}", point.DataXValue, point.DataYValue));
}
chart.Trackball.Tooltip.Text = str.ToString();
}
}I've attached a sample app demonstrating the approach, please download it and give it a try.
Let me know if you have any additional questions or concerns on this.
Rank 1
Iron
Iron
Iron
Hi Yana!
Thank you for your help!
Custom tooltip ok.
I need to do this part, I don't know it's possible.
When clicking on the list item (1,2,3,4 or 5) it shows in the graphic the position with a tooltip.
Example in the image
Regards,
Rodrigo.
Hi Rodrigo,
I am afraid that wouldn't be possible with the current implementation of the Chart tooltips. I agree this is a valid use case, so I logged a feature request on your behalf in our public feedback portal to provide a way to programmatically invoke the tooltips:
Chart: Display tooltip on a specific data point programmatically
Please follow the feedback item to get email notifications on status changes.
Let me know if I can help with anything else.
Rank 1
Is there any plan to support this feature in Telerik UI for .NET MAUI?
I have been looking for a way to achieve this in the Telerik Chart component, but so far I have not found a supported approach.
This functionality is already available in competing chart libraries such as Syncfusion and DevExpress, and it would be very valuable to have a native Telerik solution as well. At the moment, the lack of this feature may force developers to depend on third-party chart components for scenarios that could otherwise be handled entirely within Telerik UI.
Could you please confirm whether this is currently possible, planned for a future release, or if there is any recommended workaround?
Thank you.
Hi Rodrigo,
Thank you for your feedback.
I reviewed the forum thread and noticed two feature requests in it. Could you please specify which feature request you mean by "Is there any plan to support this feature in Telerik UI for .NET MAUI?" - The tooltip template or the Display tooltip on a specific data point programmatically
Rank 1
Thank you for your reply.
I am referring to the feature request about displaying a tooltip on a specific data point programmatically.
My scenario is the same as the example I shared previously. I have a list of items (1, 2, 3, 4, 5) and, when the user clicks an item in the list, I would like the chart to automatically highlight the corresponding data point and display its tooltip.
In other words, I would like to achieve the behavior shown in the image/example from my previous comment, where the tooltip is displayed for a specific chart point based on an external user action.
Is there any plan to support this functionality in Telerik UI for .NET MAUI?
Thank you.
Hi Rodrigo,
Thank you for the additional details.
I have forwarded your feedback to the development and management team. At this time, I cannot commit a time frame when the feature will be implemented, however we are working on Chart improvements and added this feature to the backlog for a review.
Let me know if I can assist with anything else.