ChartTooltipBehavior template

1 Answer 39 Views
Chart
Rodrigo
Top achievements
Rank 1
Iron
Iron
Iron
Rodrigo asked on 08 Mar 2024, 07:25 PM

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

Sort by
0
Yana
Telerik team
answered on 11 Mar 2024, 10:22 AM

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

A brand new ThemeBuilder course was just added to the Virtual Classroom. The training course was designed to help you get started with ThemeBuilder for styling Telerik and Kendo UI components for your applications. You can check it out at https://learn.telerik.com
Rodrigo
Top achievements
Rank 1
Iron
Iron
Iron
commented on 11 Mar 2024, 12:10 PM

Hi Yana!

I'm using for Android and iOS.

Tks!

Regards,

Rodrigo.

Yana
Telerik team
commented on 12 Mar 2024, 01:52 PM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 13 Mar 2024, 08:47 PM

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
Telerik team
commented on 14 Mar 2024, 09:26 AM

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.

Tags
Chart
Asked by
Rodrigo
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Yana
Telerik team
Share this question
or