Tooltip show outside Chart area with PieSeries

[Nguyen Khoa Lu]

1. Syncfusion version: 18.1.0.44

2. Device: Simulator Iphone 11 Pro Max 13.4

Source code:

public class ChartDemo : ContentPage

    {

        StackLayout stack;

        SfChart chart;

        ViewModel model;

        ChartLegend legend;

        public ChartDemo() : base()

        {

            stack = new StackLayout();

            chart = new SfChart();

            model = new ViewModel();

            legend = new ChartLegend();

            legend.DockPosition = LegendPlacement.Bottom;

            chart.BindingContext = model;

            chart.Title.Text = "Chart Error";

            chart.Legend = legend;

            legend.OverflowMode = ChartLegendOverflowMode.Wrap;

            chart.VerticalOptions = LayoutOptions.Fill;

            chart.HorizontalOptions = LayoutOptions.Fill;

            SeriesRefresh(model.Data);

            stack.Orientation = StackOrientation.Vertical;

            stack.Children.Add(chart);

            this.Content = stack;

        }

        private void SeriesRefresh(object ItemSource)

        {

            var series1 = new PieSeries();

            series1.ItemsSource = ItemSource;

            series1.XBindingPath = "Name";

            series1.YBindingPath = "Height";

            series1.EnableTooltip = true;

            series1.IsVisibleOnLegend = true;

            series1.EnableAnimation = true;

            series1.LegendIcon = ChartLegendIcon.SeriesType;

            series1.ConnectorLineType = ConnectorLineType.Line;

            series1.StartAngle = 270;

            series1.EndAngle = 630;

            series1.TooltipTemplate = new DataTemplate(() =>

            {

                var result = new StackLayout();

                var yValue = new Label();

                var xValue = new Label();

                result.Orientation = StackOrientation.Horizontal;

                yValue.TextColor = Color.White;

                yValue.Margin = new Thickness(3, 0);

                yValue.LineBreakMode = LineBreakMode.TailTruncation;

                yValue.SetBinding(Label.TextProperty, "Name");

                xValue.TextColor = Color.White;

                xValue.Margin = new Thickness(3, 0);

                xValue.SetBinding(Label.TextProperty, "Height");

                result.Children.Add(yValue);

                result.Children.Add(xValue);

                return result;

            });

            chart.Series.Add(series1);

        }

    }

    public class ViewModel

    {

        public List<Person> Data { get; set; }

        public List<Person> Data2 { get; set; }

        public ViewModel()

        {

            Data2 = new List<Person>();

            Data = new List<Person>()

            {

                new Person("Long name Long name Long name Long name Joe", 70),

                new Person("Long name Long name Long name Long name David", 10),

                new Person("Micheal", 10),

                new Person("Steve", 10)

            };

        }

    }

    public class Person

    {

        public string Name { get; set; }

        public double Height { get; set; }

        public Person(string name, double height)

        {

            this.Name = name;

            this.Height = height;

        }

    }

Screen shot:

[Devakumar Dhanapoosanam]

Hi Nguyen Khoa Lu, 

 

Greetings from Syncfusion. 

 

Currently we are checking the reported issue at our end and will update you the details on April 22, 2020. 

 

Regards, 

Devakumar D 

[Devakumar Dhanapoosanam]

Hi Nguyen Khoa Lu, 

 

We can resolve the reported issue with the help of OnDraw method in ChartTooltipBehaviorHelper using CustomRenderer in iOS platform. Please refer below code snippet, 

 

C#: 

… 

public class CustomChartRenderer : SfChartRenderer 

{ 

        protected override void OnElementChanged(ElementChangedEventArgs<SfChart> e) 

        { 

            base.OnElementChanged(e); 

 

            if (Control != null && Control is Native.SFChart) 

            { 

                SfChart FormsChart = Element as SfChart; 

 

                for (int i = 0; i < FormsChart.ChartBehaviors.Count; i++) 

                { 

                    if (FormsChart.ChartBehaviors[i] is ChartTooltipBehavior) 

                    { 

                        ChartTooltipBehavior formsTooltip = FormsChart.ChartBehaviors[i] as  

                                                            ChartTooltipBehavior; 

                        TooltipBehaviorExt nativeTooltip = new TooltipBehaviorExt(); 

                        nativeTooltip.FormsBehavior = formsTooltip; 

                        var properties = SfChartRenderer.GetPropertiesChanged(typeof(ChartTooltipBehavior),  

                                                             formsTooltip); 

 

                        foreach (var name in properties) 

                        { 

                            ChartTooltipBehaviorMapping.OnChartTooltipBehaviorPropertiesChanged(name,  

                                                              formsTooltip, nativeTooltip); 

                        } 

 

                        SfChartRenderer.SetNativeObject(typeof(ChartTooltipBehavior), formsTooltip,   

                                                                      nativeTooltip); 

                        Control.Behaviors.RemoveAt(i); 

                        Control.Behaviors.Insert(i, nativeTooltip); 

                    }                    

                } 

            } 

        } 

} 

 

public class TooltipBehaviorExt : ChartTooltipBehaviorHelper 

{ 

        public override void DrawRect(CGRect rect) 

        { 

            PropertyInfo propertyInfo = typeof(Native.SFChart).GetProperty("TooltipView",  

                                              BindingFlags.NonPublic | BindingFlags.Instance); 

            UIView value = (UIView)propertyInfo.GetValue(this.Chart, null); 

            UIView tooltipView = value; 

            CGRect seriesClipRect = Chart.SeriesClipRect; 

            nfloat width = value.Frame.Width; 

            nfloat height = value.Frame.Height; 

 

            if (value.Frame.X < 0) 

            { 

                tooltipView.Frame = new CGRect(seriesClipRect.Left, seriesClipRect.GetMidY(), width,  

                                                                         height); 

            } 

            else if(value.Frame.Y > seriesClipRect.Height) 

            { 

                tooltipView.Frame = new CGRect(value.Frame.X, seriesClipRect.GetMidY(), width, height); 

            } 

            else if (value.Frame.X > seriesClipRect.GetMidX()) 

            { 

                tooltipView.Frame = new CGRect(seriesClipRect.Left, seriesClipRect.Top, width, height); 

            } 

 

            propertyInfo.SetValue(Chart, tooltipView); 

 

            base.DrawRect(rect); 

        } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/153479/ze/1534791931484067.zip  

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D 

[Matthew Finch]

Hi,

Would you have the same fix for off-screen tooltip custom renderer but for Android? I have issues with columnseries tooltip showing off-screen and believe that this should fix issues.

Any help much appreciated,

Best Regards,

Matt

[Yuvaraj Palanisamy]

Hi Matthew Finch, 

 

We will check and update you with complete details or sample in two business days (25^th February, 2022). 

 

Regards, 

Yuvaraj. 

[Devakumar Dhanapoosanam]

Hi Matthew Finch, 

 

We can resolve the reported problem for large tooltip label using custom TooltipTemplate and by applying label WidthRequest and LineBreakMode to wrap label as per in the below code. 

 

<chart:ColumnSeries x:Name="series1" ItemsSource="{Binding Data}" 

                     XBindingPath="XValue" YBindingPath="YValue1" 

                     EnableTooltip="True"> 

     <chart:ColumnSeries.TooltipTemplate> 

         <DataTemplate> 

             <StackLayout Orientation="Vertical"> 

                 <StackLayout Orientation="Horizontal"> 

                     <Label Text="{Binding XValue}" LineBreakMode="WordWrap" WidthRequest="100"/> 

                 </StackLayout> 

                 <StackLayout Orientation="Horizontal"> 

                     <Label Text="{Binding YValue}"/> 

                 </StackLayout> 

             </StackLayout> 

         </DataTemplate> 

     </chart:ColumnSeries.TooltipTemplate> 

 </chart:ColumnSeries> 

 

UG: https://help.syncfusion.com/xamarin/charts/tooltip#tooltip-template  

Already we have logged a feature request for “Support to smart tooltip arrangement in the chart area” and it can be tracked through our feedback portal below. 

 

https://www.syncfusion.com/feedback/7270  

 

Please cast your vote to make it count and if you have any more specifications/suggestions to the feature request, you can add it as a comment in the portal. 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D