New to Telerik UI for .NET MAUI? Start a free 30-day trial

Customize the tooltip's appearance in the Chart for .NET MAUI


Property Value
Product Chart for .NET MAUI


I want to customize the tooltips in the Chart for .NET MAUI.


To customize the tooltip in the NET MAUI Chart, you can use the native Chart implementation of the different platforms (Android and iOS):

  1. Subscribe to the HandlerChanged event of the chart.
  2. 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;

    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);

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.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);
        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)
                first = !first;
            str.Append(string.Format("Value of {0} is $ {1}", point.DataXValue, point.DataYValue));
        chart.Trackball.Tooltip.Text = str.ToString();


  • 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.

See Also

In this article