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
close icon

Creating a custom tooltip with model data not part of SFChart's column series values.

Hi all, 

Firstly, as this is my first post here I thought I'd say how awesome the SF essential studio is for Xamarin.iOS. Keep up to good work!

Now, onto the reason for creating this post!

I have a a SFChart which is created using dynamic data from a web request. I have data source derived from SFChartDataSource which overrides the necessary methods. The chart renders beautifully and swiftly. 

However, in my override of GetSeries I note that SFStackingColumnSeries has the property EnableTooltip (bool). What I am trying to achieve is when a user click on the column it look to the array of dynamic data held in memory and displays BOTH the column value (within the SFChart) AND some unrelated data held at the appropriate index of my dynamic data array. 

So, for example, 

   DynamicData[] data = await _myrepository.Get(); // web call which returns the data 

   SFChart chart = new SFChart();

   chart.Frame = new CGRect(0, 0, 984, 550);
        chart.Legend.Visible = false;
        //Adding Primary Axis for the Chart.
        SFCategoryAxis primaryAxis = new SFCategoryAxis();
        primaryAxis.ShowMajorGridLines = false
        chart.PrimaryAxis = primaryAxis;
        //Adding Secondary Axis for the Chart.
        SFNumericalAxis secondaryAxis = new SFNumericalAxis();
        secondaryAxis.ShowMajorGridLines = false;
        secondaryAxis.ShowMinorGridLines = false;
        secondaryAxis.Visible = false;
        chart.SecondaryAxis = secondaryAxis;
        chart.BackgroundColor = UIColor.Clear;
        // Setup colors for vials 
        chart.ColorModel.Palette = SFChartColorPalette.Custom;
        chart.ColorModel.CustomColors =      NSArray.FromObjects
        UIView centerLine = new UIView();
        centerLine.Frame = new CGRect(x: 0, y: 265, width: 984, height: 2);
        centerLine.BackgroundColor = UIColor.Black;
        //Defining the data source for the Chart.
        // First send in the collection retrieved from MLP portal
        CustomViewModel dataModel = new CustomViewModel(data);
        // Send ViewModel as Chart DataSource
        chart.DataSource = dataModel as SFChartDataSource;
        this.GraphScrollView.ContentSize = chart.Frame.Size;

For brevity I won't include the CustomViewModel which derives from SFChartDataSource. Just assume that it takss the data object and correctly implements GetNumberOfDataPoints, GetSeries, NumberOfSeriesInChart and GetDataPoint. 

So how does the API provide for customizing the Tooltip in this manner? Do I need to override anything or create my own UIGestureRecognizer which detects tap and the gets from the data array based on the index of the tapped column???

What I am trying to display is deltas of the column data, averages and calculated values - obviously NOT part of the chart itself.

Any assistance with this problem would be most appreciated. 

3 Replies

JC Jaikrishna Chandrasekar Syncfusion Team July 27, 2016 02:20 PM UTC

Hi John Nolan, 
Thanks for contacting Syncfusion Support. 
We are able to achieve your requirement with the help of WillShowToolTip method in the ChartDelegate. 
We have prepared a sample based on your requirement and it can be downloaded from the below location. 
Jaikrishna C 

JN John Nolan August 1, 2016 08:01 AM UTC

Now that is customer service!

Thanks so much. 

Is there a chance of adding this solution to the Online Documentation in case anyone else has similar requirements?



JC Jaikrishna Chandrasekar Syncfusion Team August 2, 2016 05:14 PM UTC

Hi John Nolan, 

Thanks for the update. We are glad to know that the given solution works. We already have the online documentation link. 
Please let us know if you need any further assistance. 
Jaikrishna C 

Live Chat Icon For mobile
Up arrow icon