Customize the tooltip's appearance in the Chart for .NET MAUI
Environment
Property | Value |
---|---|
Product | Chart for .NET MAUI |
Description
I want to customize the tooltips in the Chart for .NET MAUI.
Solution
To customize the tooltip in the NET MAUI Chart, you can use the native Chart implementation of the different platforms (Android and iOS):
- Subscribe to the
HandlerChanged
event of the chart. - Use the native chart objects to customize the tooltip on Android and iOS platforms.
Here is an example of how to customize the tooltip:
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
}
Android Specifics
For Android, you must 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;
}
}
iOS Specifics
For iOS, define the MyChartDelegate
class inside the 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();
}
}
Notes
- With the native approach, you won't be able to bind properties from the page's View Model. You will have access to the data points and their data.
- Make sure to replace the placeholder class names and namespaces with your actual class names and namespaces.