We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Display tooltip in Xamarin.Forms

Hi,

I'm trying to display tooltip for the Line series, I did some Research and made-up his code, but it tooltip is not visible. What I'm doing wrong? Please guide me to a documentation or sample..

   
         var startDate = DateTime.Now.AddYears(-1);

            var data = new List<Data>();
            for (int i = 0; i < 10; i++)
            {
                var d = new Data();
                d.Date = startDate.AddDays(i);
                d.Value = random.Next(0, 10);

                i++;
                data.Add(d);
            }

            SfChart chart = new SfChart();

            ChartTrackballBehavior trackBall = new ChartTrackballBehavior();
            trackBall.LabelStyle = new ChartTrackballLabelStyle();
            trackBall.LabelStyle.BackgroundColor = Color.Gray;
            trackBall.LabelDisplayMode = TrackballLabelDisplayMode.FloatAllPoints;
            trackBall.ShowLine = false;
            chart.ChartBehaviors.Add(trackBall);

            chart.PrimaryAxis = new DateTimeAxis {

                //ShowMajorGridLines = false,//Hide Grid Lines

            };

            chart.SecondaryAxis = new NumericalAxis {
                //ShowMajorGridLines = false, //Hide Grid Lines
            };


            
            LineSeries lineSeries = new LineSeries()
            {
                Color = Color.Red, //Series Color
                ItemsSource = data,
                XBindingPath = "Date",
                YBindingPath = "Value",
                DataMarker = new ChartDataMarker(), //Display Labels
                EnableDataPointSelection = true, //Enabling Selection
            };

            chart.Series.Add(lineSeries);

Thanks,
Femil Shajin

13 Replies

PS Parthiban Sundaram Syncfusion Team December 21, 2015 12:36 PM UTC

Hi Femil,

Thanks for using Syncfusion Products.

We have analysed your code and it is fine. To display the Tooltip in Trackball Behaviour,
you need to tap and hold the chart area.

We are glad to announce that Essential Studio for Volume 4, 2015 has Tooltip Behaviour
support and which is available from January 2016.

Please let us know, if you have any concerns.

Regards,
Parthiban S


FS Femil Shajin December 21, 2015 03:42 PM UTC

Hi Parthiban,

Thanks, It works. I was not aware of the long tap. Can I display X value of the chart incase of Bar/Doughnut chart. I prefer Tooltip rather than Legends.

Regards,
Femil Shajin


PS Parthiban Sundaram Syncfusion Team December 22, 2015 12:45 PM UTC

Hi Femil,

We have analyzed your requirement and able to achieve with following workaround sample. If you want to display the X value of the chart with Tooltip, please wait for Essential Studio Volume 4 release which scheduled to roll out at the mid of January, 2016.

Sample: https://www.syncfusion.com/downloads/support/forum/121482/ze/Doughnut_Sample-1560231670
 
Please let us know, if you have any concerns.

Regards,
Parthiban S


FS Femil Shajin January 19, 2016 06:39 AM UTC

Hi,

It seems like the update has been rolled out with tooltip (Just gone through your release documents in xamarin component store). But I can't find how to implement part of it, Would be great if you can redirect me to the documentation if available or a sample snippet to start with tooltip?

Thanks,
Femil Shajin


ME Manivannan Elangovan Syncfusion Team January 20, 2016 09:04 AM UTC

Hi Femil,

To enable the tooltip, set EnableTooltip property as true which is available in series. The ChartTooltipBehavior is used to customize the tooltip label. Please refer to the following code example for enabling and customizing the tooltip.


Code Example:

ColumnSeries column = new ColumnSeries();

//Enable the tooltip

column.EnableTooltip = true;

column.XBindingPath = "Name";

column.YBindingPath = "Value";

column.ItemsSource = dataModel.data;


//Customize the tooltip label

ChartTooltipBehavior tooltip = new ChartTooltipBehavior();

tooltip.BackgroundColor = Color.Blue;

tooltip.BorderColor = Color.Aqua;

tooltip.BorderWidth = 3;

chart.ChartBehaviors.Add(tooltip);


We have prepared a sample and it can be downloaded from the below location.

Sample: Tooltip

Regards,
Manivannan.E



JD Jeff Dalby January 21, 2016 12:03 AM UTC

I've got the same requirement to get tooltip working like they do on WinRT.   I've downloaded your example, which won't compile for me but that's not the issue.  When the behavior is called is anything passed so we can identify what the person clicked on?  I assume there has to bee or there's not much point in the tip.  Second is do we have the option to style the tooltip with a datatemplate?  Our requirement at a minimum is to have the user click on a bar on a stacking column series and get a text note that is tied to a description on the data point.  On WinRT we did this with a custom object that had the X and Y values in  it along with the note text.  Because we could use data templates it was easy to just assign the text of the tooltip to the value of the note in the object.

I do see that the Xamarin documentation now says we can use a custom object (when I originally wrote the code it only mentioned a ChartDataPoint) but without any info on how the behavior works I'm not sure how to proceed.  Also, since it's probably relevant to people trying to accomplish this with custom objects, does Xamarin SFChart still have a limitation where it can't do complex binding for the X and Y values?  Our old data model looked like this:


class datapoint
        datetime mydate
        int value

class data

        Datapoint subset1
        Datapoint subset2
        Datapoint subset3
        string datanote 

ObservableCollection<data>  ourdata

And then for our chart we set it up like

mychart
  primaryaxis categoryaxis
  secondaryaxis numericalaxis

  stackingcolumnseries XBindingPath subset1.mydate YBindingPath subset1.value
  stackingcolumnseries XBindingPath subset2.mydate YBindingPath subset2.value
  stackingcolumnseries XBindingPath subset3.mydate YBindingPath subset3.value

and within each stacking column series in the chart there would be a tooltiptemplate using Binding Item.note for the text.

With the new release, if you use a stacking column series with a custom object does it just stack by which node it is in the series still and then by the X value?  I'd love to go back to the old data model so I don't use custom objects in our WinRT app (which isn't moving to Xamarin Forms) and ChartDataPoints with our Xamarin Forms iOS and Android apps.  It saves us a step in converting data which is time consuming.  Plus if we could some how use the same binding concept for the tooltip template we'd already have the note tied to the series.

I guess what it comes down to is, how do we use the latest code to accomplish something like I've got above?

Thank you.




FS Femil Shajin January 21, 2016 07:30 AM UTC

Hi Manivannan,

I was looking for ToolTipBehaviour in the previous version, Yeah Now I got it working now, But how can I show tooltip as shown in the below picture.

Thanks,
Femil Shajin C
Tooltip


ME Manivannan Elangovan Syncfusion Team January 21, 2016 12:43 PM UTC

Hi Jeff,

Query1: Complex Binding support.

Currently, complex binding is supported in WinRT and WP except Android and iOS.

Query2: Customizing the tooltip with custom object ChartDataPoint itemsSource.

We have provide a sample for customizing the tooltip in our Xamarin forms sample browser. Please find the sample from the below location.

{downloadlocation}\Xamarin_Packages\sample\Forms\SampleBrowser\SampleBrowser\Samples\Chart\TooltipCustomization

Tooltip customization has been achieved by using CustomRenderer for Andriod, WinRT and WinPhone. For iOS, instead of CustomRenderer we have used CustomDelegate.

Android CustomRenderer location:
{downloadlocation}\Xamarin_Packages\sample\Forms\SampleBrowser\SampleBrowser.Droid\Chart

WindowsPhone and WinRT CustomRenderer location:
{downloadlocation}\Xamarin_Packages\sample\Forms\SampleBrowser\SampleBrowser.WinPhone\Renderer

iOS CustomDelegate location:
{downloadlocation}\Xamarin_Packages\sample\Forms\SampleBrowser\SampleBrowser.iOS\Chart

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

Regards,
Manivannan.E


ME Manivannan Elangovan Syncfusion Team January 21, 2016 01:17 PM UTC

Hi Femil,

We have provide a sample for customizing the tooltip in our Xamarin forms sample browser. Please find the sample from the below location.

{downloadlocation}\Xamarin_Packages\sample\Forms\SampleBrowser\SampleBrowser\Samples\Chart\TooltipCustomization

Tooltip customization has been achieved by using CustomRenderer for Andriod, WinRT and WinPhone. For iOS, instead of CustomRenderer we have used CustomDelegate.

Android CustomRenderer location:
{downloadlocation}\Xamarin_Packages\sample\Forms\SampleBrowser\SampleBrowser.Droid\Chart

WindowsPhone and WinRT CustomRenderer location:
{downloadlocation}\Xamarin_Packages\sample\Forms\SampleBrowser\SampleBrowser.WinPhone\Renderer

iOS CustomDelegate location:
{downloadlocation}\Xamarin_Packages\sample\Forms\SampleBrowser\SampleBrowser.iOS\Chart

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

Regards,
Manivannan.E


JD Jeff Dalby January 26, 2016 05:25 PM UTC

OK so I've had time to look over the sample.  Basically it seems there just isn't real support for customizable tooltips like on WinRT.  Aside from having to write our own custom renderer's it seems like there's no way to actually have a separate set of data in the tooltip outside of the X and Y values.  In the example all that is being done is displaying the same data that the chart already has on it with a picture added, sort of like the trackball option but less useful...unless you really just want to have a picture in with the data and a separate color.  I guess for some that would be useful and it's better than no option for those that need it.

That being said, from the online documentation we went from WinRT saying that: 

The ToolTip feature allows you to display any information over a ChartSeries. It is used in conjunction with the pointer. It appears when the mouse hovers over any chart segment. It is set to display the metadata of the particular segment or data point.

to Xamarin's Documentation stating:

SfChart provides tooltip support for all series. It is used to show information about the segment, while touch on the segment.

Since the custom renderer in the example still has to use a tooltipview and the tooltipview only allows for a chartdatapoint there's no way to pass along a value outside of the already existing chart data point. Are there plans for the tooltip to work like a traditional tooltip where you can show metadata about the segment? 



ME Manivannan Elangovan Syncfusion Team January 27, 2016 12:51 PM UTC

Hi Jeff,

We have created an incident under your Direct Trac account. So, we request to follow the incident for further details.

Our Direct Trac support system can be accessed from the following link:

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Regards,
Manivannan.E


FS Femil Shajin February 1, 2016 06:45 AM UTC

Hi Manivannan,
Can I also follow this requirement of 'displaying the metadata of the particular segment' under incident??

Thanks,
Femil Shajin C


ME Manivannan Elangovan Syncfusion Team February 2, 2016 12:31 PM UTC

Hi Femil,

Sorry for the inconvenience.

We cannot share information pertaining to another customer’s incident in a community forum as a part of maintaining confidentiality. This feature will be implemented in our upcoming Volume 1, 2016 release.

Regards,
Manivannan E.

Loader.
Live Chat Icon For mobile
Up arrow icon