Xamarin.Forms | ComponentOne
Controls / FlexChart / Features / Hit Test
In This Topic
    Hit Test
    In This Topic

    The HitTest method is used to determine X and Y coordinates, as well as the index of a point on the FlexChart where the user taps. This method is helpful in scenarios such as displaying tooltips that lies outside the series of the FlexChart.

    The following image shows a LineSymbol chart with the index of the tapped point on the chart.

    The following code examples demonstrate how to define the chart_Tapped event. This event invokes the HitTest() method to retrieve the information of the tapped point in the FlexChart region and displays it in the chart footer.

    1. Create a new Cross Platform App and open the MainPage.xaml page.
    2. In the MainPage.xaml page, replace the existing code with following code.
      XAML
      Copy Code 
      <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:c1="clr-namespace:C1.Xamarin.Forms.Chart;assembly=C1.Xamarin.Forms.Chart"
             xmlns:local="clr-namespace:Flexchart_HitTest"
             x:Class="Flexchart_HitTest.MainPage">
  <StackLayout>
    <Grid VerticalOptions="FillAndExpand">
      <c1:FlexChart x:Name="flexChart" Tapped="flexChart_Tapped"
                Header="Trigonometric functions" Footer="Cartesian coordinates"
                BindingX="X" ChartType="LineSymbols" LegendPosition="Bottom" >
        <c1:FlexChart.Series>
          <c1:ChartSeries x:Name="seriesCosX"  Binding="Y" SeriesName="cos(x)"  />
          <c1:ChartSeries x:Name="seriesSinX"  Binding="Y" SeriesName="sin(x)"  />
        </c1:FlexChart.Series>
      </c1:FlexChart>
    </Grid>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <StackLayout x:Name="stackHitTest" VerticalOptions="Fill">
        <StackLayout Orientation="Horizontal">
          <Label x:Name="lblChartElement" />
          <Label  Text="{Binding ChartElement}" />
        </StackLayout>
        <StackLayout x:Name="stackSeries">
          <StackLayout Orientation="Horizontal">
            <Label x:Name="lblSeriesName" />
            <Label  Text="{Binding Series.SeriesName}" />
          </StackLayout>
          <StackLayout x:Name="stackData">
            <StackLayout Orientation="Horizontal">
              <Label x:Name="lblPointIdx" />
              <Label  Text="{Binding PointIndex}" />
            </StackLayout>
            <StackLayout Orientation="Horizontal" >
              <Label  Text="{Binding X, StringFormat='X:{0:F2}'}" />
              <Label  Text="{Binding Y, StringFormat='Y:{0:F2}'}" />
            </StackLayout>
          </StackLayout>
        </StackLayout>
      </StackLayout>
    </Grid>
 </StackLayout>
    3. Open the MainPage.xaml.cs page from the Solution Explorer and add the following code to implement HitTest functionality at runtime.
      C#
      Copy Code 
       public partial class HitTest : ContentPage
    {
        public HitTest()
        {
            InitializeComponent();          

            int len = 40;
            List<Point> listCosTuple = new List<Point>();
            List<Point> listSinTuple = new List<Point>();

            for (int i = 0; i < len; i++)
            {
                listCosTuple.Add(new Point(i, Math.Cos(0.12 * i)));
                listSinTuple.Add(new Point(i, Math.Sin(0.12 * i)));
            }

            this.flexChart.AxisY.Format = "n2";

            this.seriesCosX.ItemsSource = listCosTuple;
            this.seriesSinX.ItemsSource = listSinTuple;
        }

        void flexChart_Tapped(object sender, C1.Xamarin.Forms.Core.C1TappedEventArgs e)
        {
            var hitTest = this.flexChart.HitTest(e.HitPoint);

            this.stackHitTest.BindingContext = hitTest;
            this.stackData.BindingContext = hitTest;

            this.stackSeries.IsVisible = hitTest != null && hitTest.Series != null;
            this.stackData.IsVisible = hitTest != null && hitTest.PointIndex != -1;
        }
    }