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 lie outside the series of the FlexChart.

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.

In Code

Define the chart_Tapped event.
In the event definition, create an instance hitTest of type FlexChartHitTestInfo to store the information of the HitPoint.
Invoke the HitTest() method to retrieve the information of the tapped point.

Display the HitPoint information in the chart footer.

The following code shows how the event definition appears after completing the steps above.

C#	Copy Code
static void chart_Tapped(object sender, Xuni.Xamarin.Core.Events.XuniTappedEventArgs e) { // Invoke HitTest to retrieve HitPoint information FlexChartHitTestInfo hitTest = chart.HitTest(e.HitPoint); // Display HitPoint information in the chart footer chart.FooterText = "Point Index = " + hitTest.PointIndex.ToString() + "\n X Value = " + hitTest.XValue.ToString() + "\n Y Value = " + hitTest.YValue.ToString(); }

Copy Code

static void chart_Tapped(object sender, Xuni.Xamarin.Core.Events.XuniTappedEventArgs e)
{
    // Invoke HitTest to retrieve HitPoint information
    FlexChartHitTestInfo hitTest = chart.HitTest(e.HitPoint);

    // Display HitPoint information in the chart footer
    chart.FooterText = "Point Index = " + hitTest.PointIndex.ToString() + "\n X Value = " + hitTest.XValue.ToString() + "\n Y Value = " + hitTest.YValue.ToString();
}

Set the Tapped event handler on FlexChart as shown in the code below.

Note: In this topic FlexChart is declared as a public static member, outside the GetChartControl() method definition to make it accessible to the chart_Tapped event.
C#
Copy Code
//Set Tapped event handler on chart chart.Tapped += chart_Tapped;

C#	Copy Code
//Set Tapped event handler on chart chart.Tapped += chart_Tapped;

In XAML

Define the event chart_Tapped in the C# code behind of the Forms XAML Page.
In the event definition, create an instance hitTest of type FlexChartHitTestInfo to store the information of the HitPoint.
Invoke the HitTest method to retrieve the information of the tapped point.

Display the HitPoint information in the chart footer.

The following code shows how the event definition appears after completing the steps above.

C#	Copy Code
void flexChart_Tapped(object sender, Xuni.Xamarin.Core.Events.XuniTappedEventArgs e) { // Invoke HitTest to retrieve HitPoint information FlexChartHitTestInfo hitTest = chart.HitTest(e.HitPoint); // Display HitPoint information in the chart footer chart.FooterText = "Point Index = " + hitTest.PointIndex.ToString() + "\n X Value = " + hitTest.XValue.ToString() + "\n Y Value = " + hitTest.YValue.ToString(); }

Copy Code

void flexChart_Tapped(object sender, Xuni.Xamarin.Core.Events.XuniTappedEventArgs e)
{
    // Invoke HitTest to retrieve HitPoint information
    FlexChartHitTestInfo hitTest = chart.HitTest(e.HitPoint);

    // Display HitPoint information in the chart footer
    chart.FooterText = "Point Index = " + hitTest.PointIndex.ToString() + "\n X Value = " + hitTest.XValue.ToString() + "\n Y Value = " + hitTest.YValue.ToString();
}

In the XAML Forms Page, initialize the FlexChart control and set the Tapped event on FlexChart as shown in the code below.

XAML	Copy Code
<xuni:FlexChart x:Name="chart" ItemsSource="{Binding Data}" ChartType="Column" Tapped="flexChart_Tapped" > <xuni:FlexChart.Series> <xuni:ChartSeries x:Name="Sales2014" Name="2014 Sales" Binding="Sales" ></xuni:ChartSeries> </xuni:FlexChart.Series> </xuni:FlexChart>

XAML

Copy Code

<xuni:FlexChart x:Name="chart"  ItemsSource="{Binding Data}" ChartType="Column"
  Tapped="flexChart_Tapped" >
  <xuni:FlexChart.Series>
    <xuni:ChartSeries x:Name="Sales2014" Name="2014 Sales" Binding="Sales" ></xuni:ChartSeries>
  </xuni:FlexChart.Series>
</xuni:FlexChart>