Tooltip

By default, a tooltip generally displays the name of the legend along with the X and Y values of the selected point. FlexChart allows you to display customized views that may contain labels or images in the tooltip by setting the ChartTooltip.Content property. This property accepts a Xamarin layout and displays it in the form of a tooltip, when the user taps at any point on the FlexChart control.

The image below shows how a tooltip appears on FlexChart.

The following code examples demonstrate how to customize the tooltip in C#.

In Code

To accomplish this, you must first create a view to be added to the tooltip. It can include labels, images and other similar elements.

C#	Copy Code
public static StackLayout GetChartTooltip() { //Add labels Label title = new Label(); title.SetBinding(Label.TextProperty, "SeriesName"); title.TextColor = Color.FromHex("#8A2BE2"); Label content = new Label(); content.SetBinding(Label.TextProperty, "YValue"); content.TextColor = Color.Black; //Add an image var img = new Image { Aspect = Aspect.AspectFit }; img.Source = ImageSource.FromResource("chartsCS.Samples.GC.png"); //Add the labels and image to the container StackLayout verticalContainer = new StackLayout(); verticalContainer.Orientation = StackOrientation.Vertical; verticalContainer.Padding = 5; verticalContainer.BackgroundColor = Color.FromHex("#eeffbd"); verticalContainer.Children.Add(img); verticalContainer.Children.Add(title); verticalContainer.Children.Add(content); return verticalContainer; }

Copy Code

public static StackLayout GetChartTooltip()
{
    //Add labels
    Label title = new Label();
    title.SetBinding(Label.TextProperty, "SeriesName");
    title.TextColor = Color.FromHex("#8A2BE2");

    Label content = new Label();
    content.SetBinding(Label.TextProperty, "YValue");
    content.TextColor = Color.Black;

    //Add an image
    var img = new Image { Aspect = Aspect.AspectFit };
    img.Source = ImageSource.FromResource("chartsCS.Samples.GC.png");

    //Add the labels and image to the container
    StackLayout verticalContainer = new StackLayout();
    verticalContainer.Orientation = StackOrientation.Vertical;
    verticalContainer.Padding = 5;
    verticalContainer.BackgroundColor = Color.FromHex("#eeffbd");
    verticalContainer.Children.Add(img);
    verticalContainer.Children.Add(title);
    verticalContainer.Children.Add(content);

    return verticalContainer;
}

Assign the view to the chart tooltip as shown below. The following example uses the sample created in the Quick Start section.

C#	Copy Code
chart.Tooltip.Content = Tooltips.GetChartTooltip();