ChartTooltipBehavior template

[Rodrigo]

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>

 

[Yana]

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

[Rodrigo]

Hi Yana!

I'm using for Android and iOS.

Tks!

Regards,

Rodrigo.

[Yana]

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.

[Rodrigo]

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.

[Yana]

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.