ComponentOne Xamarin Edition
Hit Test
Controls > FlexChart > Features > Hit Test

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.
    Copy Code
    <ContentPage xmlns=""
        <Grid VerticalOptions="FillAndExpand">
          <c1:FlexChart x:Name="flexChart" Tapped="flexChart_Tapped"
                    Header="Trigonometric functions" Footer="Cartesian coordinates"
                    BindingX="X" ChartType="LineSymbols" LegendPosition="Bottom" >
              <c1:ChartSeries x:Name="seriesCosX"  Binding="Y" SeriesName="cos(x)"  />
              <c1:ChartSeries x:Name="seriesSinX"  Binding="Y" SeriesName="sin(x)"  />
            <RowDefinition Height="Auto"/>
          <StackLayout x:Name="stackHitTest" VerticalOptions="Fill">
            <StackLayout Orientation="Horizontal">
              <Label x:Name="lblChartElement" />
              <Label  Text="{Binding ChartElement}" />
            <StackLayout x:Name="stackSeries">
              <StackLayout Orientation="Horizontal">
                <Label x:Name="lblSeriesName" />
                <Label  Text="{Binding Series.SeriesName}" />
              <StackLayout x:Name="stackData">
                <StackLayout Orientation="Horizontal">
                  <Label x:Name="lblPointIdx" />
                  <Label  Text="{Binding PointIndex}" />
                <StackLayout Orientation="Horizontal" >
                  <Label  Text="{Binding X, StringFormat='X:{0:F2}'}" />
                  <Label  Text="{Binding Y, StringFormat='Y:{0:F2}'}" />
  3. Open the MainPage.xaml.cs page from the Solution Explorer and add the following code to implement HitTest functionality at runtime.
    Copy Code
     public partial class HitTest : ContentPage
            public HitTest()
                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;