Custom tooltip

[shermin]

Hi,

I have a chart with itemsource binded through c# code. Is it possible to get the x and values in tooltip.

seriestrucks.ItemsSource = sessionstrucks;

            seriestrucks.XBindingPath = "LiftingDate";

            seriestrucks.YBindingPath = "TruckNo";

            seriestrucks.Label = "LPG";

Shermin

[Durgadevi Selvaraj]

Hi Shermin, 

 

Thanks for contacting Syncfusion Support. 

 

You can achieve this requirement(Displaying tooltip with X and Y values) by customizing chart tooltip using TooltipTemplate of Chart series as shown in below code, 

 

Code Snippet[C#] 

DataTemplate template = new DataTemplate(() => 

            { 

                StackLayout container = new StackLayout(); 

                StackLayout stack = new StackLayout() { Orientation = StackOrientation.Horizontal }; 

                Label label = new Label() { Text = "XValue:" }; 

                Label xValue = new Label(); 

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

                stack.Children.Add(label); 

                stack.Children.Add(xValue); 

                StackLayout stack1 = new StackLayout() { Orientation = StackOrientation.Horizontal }; 

                Label label1 = new Label() { Text = "YValue:" }; 

                Label yValue = new Label(); 

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

                stack1.Children.Add(label1); 

                stack1.Children.Add(yValue); 

                container.Children.Add(stack); 

                container.Children.Add(stack1); 

                return container; 

            }); 

 

            column.TooltipTemplate = template; 

            Chart.Series.Add(column); 

 

 

Please find the reference output screenshot below, 

 

 

Please find the reference sample from below link, 

Sample:ChartTooltip_SFChart
 

 

You can also refer our UG documentation link to know more about customizing Tooltip in SfChart, 

Link: https://help.syncfusion.com/xamarin/sfchart/tooltip 

Regards, 

Durgadevi S 

[Padmini Ramamurthy]

From: Shermin Ismail
Sent: Wednesday, February 14, 2018 4:13 AM
To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 135889, Custom tooltip, has been updated. 

Hi, 

  

Thanks for your code. Is it possible to put two custom tool tip for two series. In my chart two spline series are there but always , tool tip for second series override the first series tool tip template. 

  

Regards, 

Shermin Ismail 

[Divya Venkatesan]

Hi Shermin,

Could you please let us know if your requirement is to set the tooltip template for two series or display the values of two series in single tooltip template?

Regards,
Divya Venkatesan

[Padmini Ramamurthy]

From: Shermin Ismail
Sent: Thursday, February 15, 2018 3:43 AM
To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 135889, Custom tooltip, has been updated. 

Hi, 

  

I tried to implement like this and I happy with this. Please ignore my previous requirement of having two separate tool tips. In mobile app, it is too confusing to have two tooltip on small space. 

  

DataTemplate templateNGLVolume = new DataTemplate(() => 

            { 

                StackLayout container = new StackLayout(); 

                container.BackgroundColor = Color.White; 

                StackLayout stack = new StackLayout() { Orientation = StackOrientation.Horizontal }; 

                stack.BackgroundColor = Color.White; 

                Label label = new Label() { Text = "XValue:" }; 

                Label xValue = new Label(); 

  

                xValue.HorizontalTextAlignment = TextAlignment.Center; 

                xValue.FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)); 

  

                xValue.SetBinding(Label.TextProperty, new Binding("DPRDate", stringFormat: "{0:dd-MMM}")); 

                stack.Children.Add(xValue); 

                StackLayout stack1 = new StackLayout() { Orientation = StackOrientation.Horizontal }; 

                stack1.BackgroundColor = Color.White; 

                Label yValue = new Label(); 

                yValue.FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label)); 

                yValue.SetBinding(Label.TextProperty, new Binding("NGLVolume", stringFormat: "Cond:{0}")); 

  

  

                Label yValueCond = new Label(); 

                yValueCond.FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label)); 

  

                yValueCond.SetBinding(Label.TextProperty, new Binding("LPGWeight", stringFormat: "Lpg:{0}")); 

                //stack1.Children.Add(label1); 

                stack1.Children.Add(yValue); 

                container.Children.Add(stack); 

                container.Children.Add(stack1); 

                return container; 

            }); 

  

Regards, 

Shermin ismail 

From: Shermin Ismail
Sent: Thursday, February 15, 2018 2:36 AM
To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 135889, Custom tooltip, has been updated. 

Hi, 

  

I need to set tooltip template for two series of a chart. Two separate tooltip template. 

  

Regards, 

Shermin 

[Divya Venkatesan]

 Hi Shermin,

Thanks for the update.

Please let us know if you need any further assistance.

Regards,
Divya Venkatesan 

[Padmini Ramamurthy]

From: Shermin Ismail 
Sent: Monday, February 19, 2018 12:13 AM
To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 135889, Custom tooltip, has been updated. 

Hi, 

  

If you want to provide same name for tooltip template labels text . How will we add that. 

series1.ItemsSource = sessionsLPG; 

            series1.XBindingPath = "LiftingDate"; 

            series1.YBindingPath = "liftingkgs"; 

  

            seriesCond.BindingContext = sessionsCond; 

            seriesCond.ItemsSource = sessionsCond; 

            seriesCond.XBindingPath = "LiftingDate"; 

            seriesCond.YBindingPath = "liftingkgs"; 

  

  

DataTemplate templateNGLVolume = new DataTemplate(() => 

            { 

                StackLayout container = new StackLayout() { Orientation = StackOrientation.Vertical, VerticalOptions = LayoutOptions.StartAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand }; 

                container.BackgroundColor = Color.White; 

                StackLayout stack = new StackLayout() { Orientation = StackOrientation.Horizontal }; 

                stack.BackgroundColor = Color.White; 

                stack.HorizontalOptions = LayoutOptions.Center; 

                Label label = new Label() { Text = "XValue:" }; 

                Label xValue = new Label(); 

  

                 

                xValue.FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label)); 

  

                xValue.SetBinding(Label.TextProperty, new Binding("LiftingDate", stringFormat: "{0:dd-MMM}")); 

                stack.Children.Add(xValue); 

                StackLayout stack1 = new StackLayout() { Orientation = StackOrientation.Horizontal, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand }; 

                stack1.BackgroundColor = Color.White; 

                Label yValue = new Label(); 

                yValue.FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label)); 

  

                 

                yValue.SetBinding(Label.TextProperty, new Binding("liftingkgs", stringFormat: "Cond:{0}")); 

                

                Label yValueCond = new Label(); 

                yValueCond.FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label)); 

               //  

                yValueCond.SetBinding(Label.TextProperty, new Binding("liftingkgs",  stringFormat: "Lpg:{0}")); 

                stack1.Children.Add(yValueCond); 

                stack1.Children.Add(yValue); 

                container.Children.Add(stack); 

                container.Children.Add(stack1); 

                return container; 

            }); 

            seriesCond.TooltipTemplate = templateNGLVolume; 

  

In this case, two label gives the same value. How to provide two different values. One is COND and one is LPG based values.But in tooltip template, same values are coming in template. 

  

Can you please provide a solution. 

[Divya Venkatesan]

Hi Shermin,

We have prepared a sample to show the values of two series with single TooltipTemplate using Converter. Please download the sample from the following link.

Sample: https://www.syncfusion.com/downloads/support/forum/135889/ze/TooltipSample-881798226

Please let us know if you need any further assistance.

Regards,
Divya Venkatesan